用ExtJS 实现动态载入树.doc

用ExtJS 实现动态载入树（Load tree） 时间 ： 2010-12-10 作者：佚名 编辑：fnw 点击： 4353 评论 -用ExtJS 实现动态载入树（Load tree）1、 数据库背景：这里有一个组织机构表，结构如下：Oracle DDL脚本 ：显示代码打印01 create table ORGANIZATION( 02 ORGID NUMBER(10) not null, 03 PARENTID NUMBER(10) not null, 04 ORGNAME VARCHAR2(32) not null, 05 ISAVAILABLE NUMBER(1) default 1 not null 06 ); 07 alter table ORGANIZATION 08 add constraint PK_ORGID primary key (ORGID); 09 alter table ORGANIZATION 10 add constraint FK_ORGID_PARENTID foreign key (PARENTID) 11 references ORGANIZATION (ORGID); 初始化数据内容（注意第一行数据是必需的）：显示代码打印01 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (-100, -100, 组织机构图, 1); 02 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (1, -100, 公司总部1, 1); 03 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (2, -100, 公司总部2, 1); 04 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (3, -100, 公司总部3, 1); 05 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (4, 1, 公司总部1-1, 1); 06 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (5, 1, 公司总部1-2, 1); 07 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (6, 2, 公司总部2-1, 1); 08 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (7, 2, 公司总部2-2, 1); 09 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (8, 3, 公司总部3-1, 1); 10 insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (9, 3, 公司总部3-2, 1); 有了数据库支持就可以动态的从数据库中提取树数据。第一步是建立JSP文件（org.jsp）和JavaScript(org.js)文件：在org.jsp中导入ExtJS所必需的库文件，并在中加入显示代码打印01 02 03 04 Org.jsp文件完全可以是静态HTML文件，这里org.jsp中不包含任何动态内容，注意ExtJS所必需的库文件类库路径问题。 05 Org.js文件内容： 06 Ext.onReady(function() 07 var Tree = Ext.tree; 08 var tree = new Tree.TreePanel( 09 el : tree-div,/目标div容器 10 autoScroll : true, 11 animate : true, 12 enableDD : true, 13 containerScroll : true, 14 loader : new Tree.TreeLoader( 15 dataUrl : OrgTreeJsonData.action / OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值 16 ) 17 ); 18 var root = new Tree.AsyncTreeNode( 19 text : 组织机构树, 20 draggable : false, 21 id : -100/默认的node值：?node=-100 22 ); 23 tree.setRootNode(root); 24 tree.render(); 25 root.expand(); 26 ); OrgTreeJsonData.action所请求的JSON数据例子： 显示代码打印01 02 text : 公司总部1, 03 id : 1, 04 cls : folder 05 , 06 text : 公司总部2, 07 id : 2, 08 cls : folder 09 , 10 text : 公司总部3, 11 id : 3, 12 cls : folder 13 服务器端可以使用这样的SQL语句来查询：显示代码打印1 select id,name,t.parentid from organization t 2 where t.parentid=-100 and id!=-100 下面的代码片断用于struts2 action类中： 显示代码打印01 public String treeNode() 02 try 03 List list = anizationService.findByParentId(this.node); 04 if (list != null & !list.isEmpty() 05 boolean isFirst = true; 06 int i = 0; 07 int last = list.size(); 08 for (Object o : list) 09 if (i = 0) 10 this.setJsonString(text : + o1.toString() + ,id : + o0.toString() 11 + ,cls :folder ); 12 else if (i = (last - 1) 13 this.setJsonString(this.getJsonString() + ,text : + o1.toString() + ,id : 14 + o0.toString() + ,cls :folder); 15 else 16 this.setJsonString(this.getJsonString() + ,text : + o1.toString() + ,id : 17 + o0.toString() + ,cls :folder); 18 19 i+; 20 21 else 22 this.setJsonString(); 23 24 System.out