目录结构：
?
?
index.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath%>/tree.js"></script>
<script type='text/javascript' src='<%=basePath%>/js/DWRTreeLoader.js'></script>
<script type='text/javascript' src='<%=basePath%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=basePath%>/dwr/interface/TreeService.js'></script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
?
?tree.js文件
Ext.onReady(function() {
???
??? var root = new Ext.tree.AsyncTreeNode({
??? ??? ??? ??? id : "root",
??? ??? ??? ??? leaf : false,
??? ??? ??? ??? text : "树的根"
??? ??? ??? });
??? var loader = new Ext.tree.DWRTreeLoader({???
?????????????????? dataUrl:TreeService.getAllChildren???
?????????????? })?
??? var viewTree = new Ext.tree.TreePanel({
??? ??? ??? ??? id : 'vtree',
??? ??? ??? ??? renderTo : "tree",
??? ??? ??? ??? root : root,
??? ??? ??? ??? loader : loader,
??? ??? ??? ??? width : 200,
??? ??? ??? ??? height : 300,
??? ??? ??? ??? title : "动态遍历树",
??? ??? ??? ??? useArrows : true,//是否使用箭头样式
??? ??? ??? ??? autoScroll : true,//滚动条
??? ??? ??? ??? animate : true,//展开,收缩动画
??? ??? ??? ??? rootVisible : true,//根节点是否可见
//??? ??? ??? ??? enableDD : true,//是否可以拖放节点
??? ??? ??? ??? tbar : [{
??? ??? ??? ??? ??? ??? ??? tooltip : "重新加载",
??? ??? ??? ??? ??? ??? ??? icon : "extjs&dwr_Tree/images/icons/reload-green.png",
??? ??? ??? ??? ??? ??? ??? cls : "x-btn-text-icon",
??? ??? ??? ??? ??? ??? ??? handler : function() {
??? ??? ??? ??? ??? ??? ??? ??? viewTree.getRootNode().reload()
??? ??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? }, "-", {
??? ??? ??? ??? ??? ??? ??? icon : "extjs&dwr_Tree/images/icons/expand-all.gif",
??? ??? ??? ??? ??? ??? ??? cls : "x-btn-text-icon",
??? ??? ??? ??? ??? ??? ??? tooltip : "全部展开",
??? ??? ??? ??? ??? ??? ??? handler : function() {
??? ??? ??? ??? ??? ??? ??? ??? viewTree.getRootNode().expand(true)
??? ??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? }, {
??? ??? ??? ??? ??? ??? ??? icon : "extjs&dwr_Tree/images/icons/collapse-all.gif",
??? ??? ??? ??? ??? ??? ??? cls : "x-btn-text-icon",
??? ??? ??? ??? ??? ??? ??? tooltip : "全部折叠",
??? ??? ??? ??? ??? ??? ??? handler : function() {
??? ??? ??? ??? ??? ??? ??? ??? viewTree.getRootNode().collapse(true)
??? ??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? }],
??? ??? ??? ??? ??? ??? tools : [{
??? ??? ??? ??? ??? ??? ??? ??? ??? id : 'refresh',
??? ??? ??? ??? ??? ??? ??? ??? ??? handler : function() {
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? var tree = Ext.getCmp('vtree');
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? tree.body.mask("数据加载中..",
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? "x-mask-loading");
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? tree.root.reload();
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? tree.root.expand(true, false,
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? function() {
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? tree.body.unmask();
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? });
??? ??? ??? ??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? ??? ??? }],???
??? ??? ??? ??? region : "west",
??? ??? ??? ??? collapseMode : "mini",
??? ??? ??? ??? collapsible : true,//面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
??? ??? ??? ??? margins : "0 0 0 0",
??? ??? ??? ??? split : true,
??? ??? ??? ??? border : true
??? ??? ??? });
});
Node类:
package test;
public class Node {
??? private int id;
??? private String text;
??? private boolean leaf;
???
???
??? public Node(int id, String text,boolean leaf) {
??? ??? this.id = id;
??? ??? this.text = text;
??? ??? this.leaf = leaf;
??? }
??? public int getId() {
??? ??? return id;
??? }
??? public void setId(int id) {
??? ??? this.id = id;
??? }
??? public String getText() {
??? ??? return text;
??? }
??? public void setText(String text) {
??? ??? this.text = text;
??? }
??? public boolean isLeaf() {
??? ??? return leaf;
??? }
??? public void setLeaf(boolean leaf) {
??? ??? this.leaf = leaf;
??? }
}
TreeService类：
package test;
import java.util.ArrayList;
import java.util.List;
public class TreeService {
??? public List getAllChildren(String parentId) {
??? ??? List list = new ArrayList();
??? ??? if (parentId.equals("root")) {
??? ??? ??? list.add(new Node(1,"子节点1",false));
??? ??? ??? list.add(new Node(2,"子节点2",false));
??? ??? ??? list.add(new Node(3,"子节点3",false));
??? ??? ??? list.add(new Node(4,"儿子节点4",false));
??? ??? ??? list.add(new Node(5,"子节点5",false));
??? ??? ??? list.add(new Node(6,"而子节点6",false));
??? ??? } else if (parentId.equals("2")) {
??? ??? ??? list.add(new Node(9,"孙子节点9",true));
??? ??? ??? list.add(new Node(7,"孙子节点7",true));
??? ??? ??? list.add(new Node(8,"孙子节点8",true));
??? ??? } else if (parentId.equals("4")) {
??? ??? ??? list.add(new Node(11,"孙子节点11",true));
??? ??? ??? list.add(new Node(12,"孙子节点12",true));
??? ??? ??? list.add(new Node(13,"孙子节点13",true));
??? ??? } else if (parentId.equals("6")) {
??? ??? ??? list.add(new Node(21,"孙子节点21",true));
??? ??? ??? list.add(new Node(22,"孙子节点22",true));
??? ??? ??? list.add(new Node(23,"孙子节点23",true));
??? ??? }
??? ??? return list;
??? }
}
DWRTreeLoader.js文件：
Ext.tree.DWRTreeLoader = function(config) {??
? Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config);??
};??
? Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, {??
?? args:[],??
?? requestData : function(node, callback) {??
??? if (this.fireEvent("beforeload", this, node, callback) !== false) {??
????? var callParams = new Array();?????????
????? var success = this.handleResponse.createDelegate(this, [node, callback], 1);??
????? var error = this.handleFailure.createDelegate(this, [node, callback], 1);??
????? callParams.push(node.id);??
????? callParams.push({callback:success, errorHandler:error});??
????? this.transId=true;??
????? this.dataUrl.apply(this, callParams);??
??? } else {??
????? if (typeof callback == "function") {??
??????? callback();??
????? }??
??? }??
? },??
??? processResponse : function(response, node, callback){??
??????? try {??
????????? for(var i = 0; i < response.length; i++){??
??????????????? var n = this.createNode(response[i]);??
??????????????? if(n){??
??????????????????? node.appendChild(n);??
??????????????? }??
??????????? }??
??????????? if(typeof callback == "function"){??
??????????????? callback(this, node);??
??????????? }??
??????? }catch(e){??
??????????? this.handleFailure(response);??
??????? }??
??? },??
??? handleResponse : function(response, node, callback){??
??????? this.transId = false;??
??????? this.processResponse(response, node, callback);??
??????? this.fireEvent("load", this, node, response);??
??? },??
?
??? handleFailure : function(response, node, callback){??
??????? this.transId = false;??
??????? this.fireEvent("loadexception", this, node, response);??
??????? if(typeof callback == "function"){??
??????????? callback(this, node);??
??????? }??
??? }??
});????
?web.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
??? xmlns="http://java.sun.com/xml/ns/javaee"
??? xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
??? xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
??? http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
? <welcome-file-list>
??? <welcome-file>index.jsp</welcome-file>
? </welcome-file-list>
?
?? <servlet>
??? ??? <servlet-name>dwr-invoker</servlet-name>
??? ??? <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
??? ??? <init-param>
??? ??? ??? <param-name>debug</param-name>
??? ??? ??? <param-value>true</param-value>
??? ??? </init-param>
??? </servlet>
??? <servlet-mapping>
??? ??? <servlet-name>dwr-invoker</servlet-name>
??? ??? <url-pattern>/dwr/*</url-pattern>
??? </servlet-mapping>
</web-app>
?dwr.xml文件:
<?xml version="1.0" encoding="UTF-8"?>??
<dwr>
??? <allow>
??? ??? <create javascript="TreeService" creator="new">
??? ??? ??? <param name="class" value="test.TreeService"></param>
??? ??? </create>??? ???
??? ??? <convert converter="bean" match="test.Node" />
??? </allow>
</dwr>??
显示结果：
?
