目錄結(jié)構(gòu)：
?
?
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 : "動態(tài)遍歷樹",
??? ??? ??? ??? useArrows : true,//是否使用箭頭樣式
??? ??? ??? ??? autoScroll : true,//滾動條
??? ??? ??? ??? animate : true,//展開,收縮動畫
??? ??? ??? ??? rootVisible : true,//根節(jié)點是否可見
//??? ??? ??? ??? enableDD : true,//是否可以拖放節(jié)點
??? ??? ??? ??? 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("數(shù)據(jù)加載中..",
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? "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,"子節(jié)點1",false));
??? ??? ??? list.add(new Node(2,"子節(jié)點2",false));
??? ??? ??? list.add(new Node(3,"子節(jié)點3",false));
??? ??? ??? list.add(new Node(4,"兒子節(jié)點4",false));
??? ??? ??? list.add(new Node(5,"子節(jié)點5",false));
??? ??? ??? list.add(new Node(6,"而子節(jié)點6",false));
??? ??? } else if (parentId.equals("2")) {
??? ??? ??? list.add(new Node(9,"孫子節(jié)點9",true));
??? ??? ??? list.add(new Node(7,"孫子節(jié)點7",true));
??? ??? ??? list.add(new Node(8,"孫子節(jié)點8",true));
??? ??? } else if (parentId.equals("4")) {
??? ??? ??? list.add(new Node(11,"孫子節(jié)點11",true));
??? ??? ??? list.add(new Node(12,"孫子節(jié)點12",true));
??? ??? ??? list.add(new Node(13,"孫子節(jié)點13",true));
??? ??? } else if (parentId.equals("6")) {
??? ??? ??? list.add(new Node(21,"孫子節(jié)點21",true));
??? ??? ??? list.add(new Node(22,"孫子節(jié)點22",true));
??? ??? ??? list.add(new Node(23,"孫子節(jié)點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>??
顯示結(jié)果：
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
