extjs动态树从无到有

今日上班闲来无事，故将好久之前做的extjs动态树总结一下，供后学之人少走弯路。

下面开始模拟客户需求，大家看好。

需求：制作全国省、市、县（区）、乡镇、村、队、号等等无限级树型菜单。

下面是我的数据库设计：

 

create table AREA (

   id                 NUMBER(10)                      not null, --ID

   area_name       varchar2(200), --地区名称

   parent_id    NUMBER(10),   --对应的父级地域ID

   constraint PK_AREA_ID primary key (id)

);

/

create sequence AREA_SEQ start with 1 increment by 1 cache 20

/

想毕大家也看明白这表的意思了吧！第一列表示地区的唯一ID编号，第二列表示地区名称，第三列表示该地区的父区域的ID。

通过hibernate逆向工程生成.java和.hbm.xml文件，放到项目下，这个就不需要我讲了吧。

 

下面开始写代码：

首先，要创建一个extjsbean.java文件，或许你要问，为什么要创建这个.java文件呢？那么我告诉你，由于extjs动态树是对回调的数据进行框架内部直接解析，所以，后台通过ajax返回的数据必须是extjsbean类型的List数据，也就是在action中必须创建List<extjsbean> list，并在赋值后通过页面输出流输出（out.println(list)），最后return null。这样的话，extjs会自动在前台解析这个list，将list中的数据放到前台树的节点上。或许你这时要问，那么extjsbean.java文件里都有什么呢？来看一下我的吧：

/** * */ package com.sa.util; /** * @author huangbo * 2010-4-27 */ public class ExtJsBean { public Integer getTempType() { return tempType; } public void setTempType(Integer tempType) { this.tempType = tempType; } public String getId() { return id; } public void setId(String id) { this.id = id; } public Boolean getLeaf() { return leaf; } public void setLeaf(Boolean leaf) { this.leaf = leaf; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public String getText() { return text; } public void setText(String text) { this.text = text; } public Boolean getIsLeaf() { return isLeaf; } public void setIsLeaf(Boolean isLeaf) { this.isLeaf = isLeaf; } private String id;//前台node ID private String text;//树的节点名称 private Boolean isLeaf;//是否叶子节点 private Boolean leaf;//是否叶子叶点 private String icon;//图标 private Integer tempType;//临时变量，用与判断是否叶子节点，进行变更访问action的url public ExtJsBean(String id, String text, Boolean isLeaf, Boolean leaf, String icon, Integer tempType) { super(); this.id = id; this.text = text; this.isLeaf = isLeaf; this.leaf = leaf; this.icon = icon; this.tempType = tempType; } public ExtJsBean() { super(); // TODO Auto-generated constructor stub } }

你看了我的这个bean，是不是有所悟呢？？没错，正如代码中的说明，id表示在extjs解析回调的list后，在树上动态创建的node的id，以此类推。。。千万别忘记setXXX，getXXX方法噢~

 

如何在action取数据与将数据结果集转换为List<ExtjsBean> list及输出至页面这个我就不说了，如果有不会的，请留言。

 

下面来说一下在页面上写的js代码：

// 创建左侧的树(预览) var loader = new Ext.tree.TreeLoader({ url : "treeAction.do?method=findTreeList" }); loader.processResponse = function(response, node, callback) { var json = response.responseText; try { var json = eval("(" + json + ")"); var items = json.extjslist; for (var i = 0; i < items.length; i++) { var obj = this.createNode(items[i]); if (obj) { node.appendChild(obj); } } if (typeof callback == "function") { callback(this, node); } } catch (e) { this.handleFailure(response); } } tree = new Ext.tree.TreePanel({ el : 'tree_div', rootVisible : false, loader : loader, border : false, animate : true, // 动画效果 autoScroll : true, // 自动滚动 load : "loading", enableDD : false // 拖拽节点 }); var root = new Ext.tree.AsyncTreeNode({ id : '0', text : "根结点" }); tree.setRootNode(root); tree.on('beforeload', function(node) { if (node.attributes.tempType == 1) { loader.dataUrl = 'treeAction.do?method=findLeafList&leaflsh=' + node.id; } else if (node.attributes.tempType == 3) {// 指向NVR，查询NVR下的通道 loader.dataUrl = "treeAction.do?method=findChListByNvrLsh&nvrlsh=" + node.id; } else { loader.dataUrl = 'treeAction.do?method=findTreeList&parent_id=' + node.id; } }); tree.render(); 

var loader = new Ext.tree.TreeLoader({

url : "treeAction.do?method=findTreeList"

});这里是在树的初始化状态时加载的list数据

 

要动态变更指向，则用tree.on('beforeload', function(node){}这个属性来改变节点访问的URL路径。关于tree的属性、方法及事件，请查看extjs api。（关于checkbox的树，只是一个属性，与本文中的tree没有本质的区别）

 

最后：各位读者有不懂的可以留言，必回。文章属原创，转载请注明出处，谢谢！