用ExtJS 實現動態載入樹（Load tree）
1、 資料庫背景：這裡有一個組織機構表，結構如下：
Oracle DDL指令碼 ：
create table ORGANIZATION(
ORGID NUMBER(10) not null,
PARENTID NUMBER(10) not null,
ORGNAME VARCHAR2(32) not null,
ISAVAILABLE NUMBER(1) default 1 not null
);
alter table ORGANIZATION
add constraint PK_ORGID primary key (ORGID);
alter table ORGANIZATION
add constraint FK_ORGID_PARENTID foreign key (PARENTID)
references ORGANIZATION (ORGID);
初始化資料內容（注意第一行資料是必需的）：
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (-100, -100, '組織機構圖', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (1, -100, '公司總部1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (2, -100, '公司總部2', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (3, -100, '公司總部3', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (4, 1, '公司總部1-1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (5, 1, '公司總部1-2', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (6, 2, '公司總部2-1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (7, 2, '公司總部2-2', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (8, 3, '公司總部3-1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (9, 3, '公司總部3-2', 1);
有了資料庫支援就可以動態從資料庫中提取樹資料。
第一步是建立JSP檔案（org.jsp）和JavaScript(org.js)檔案：
在org.jsp中匯入ExtJS所必需的庫檔案，並在<body>中加入
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;"></div>
</body>
Org.jsp檔案完全可以是靜態HTML檔案，這裡org.jsp中不包含任何動態內容，注意ExtJS所必需的庫檔案類庫路徑問題。
Org.js檔案內容：
Ext.onReady(function() {
var Tree = Ext.tree;
var tree = new Tree.TreePanel( {
el : 'tree-div',//目標div容器
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
loader : new Tree.TreeLoader( {
dataUrl : ' OrgTreeJsonData.action '// OrgTreeJsonData.action就是要動態載入資料的請求地址，這裡請求時會提交一個參數為node的值，值為root即new Tree.AsyncTreeNode()對象的id值
})
});
var root = new Tree.AsyncTreeNode( {
text : '組織機構樹',
draggable : false,
id : '-100'//預設的node值：?node=-100
});
tree.setRootNode(root);
tree.render();
root.expand();
});
OrgTreeJsonData.action所請求的JSON資料例子：
[ {
"text" : "公司總部1",
"id" : "1",
"cls" : "folder"
}, {
"text" : "公司總部2",
"id" : "2",
"cls" : "folder"
}, {
"text" : "公司總部3",
"id" : "3",
"cls" : "folder"
}]
伺服器端可以使用這樣的SQL語句來查詢：
select t.orgid,t.orgname,t.parentid from organization t
where t.parentid='-100' and t.orgid!='-100'
下面的代碼片斷用於struts2 action類中：
public String treeNode() {
try {
List<Object[]> list = this.organizationService.findByParentId(this.node);
if (list != null && !list.isEmpty()) {
boolean isFirst = true;
int i = 0;
int last = list.size();
for (Object[] o : list) {
if (i == 0) {
this.setJsonString("[{/"text/" :/"" + o[1].toString() + "/" ,/"id/" :/"" + o[0].toString()
+ "/" ,/"cls/" :/"folder/"} ");
} else if (i == (last - 1)) {
this.setJsonString(this.getJsonString() + ",{/"text/" :/"" + o[1].toString() + "/" ,/"id/" :/""
+ o[0].toString() + "/" ,/"cls/" :/"folder/"}]");
} else {
this.setJsonString(this.getJsonString() + ",{/"text/" :/"" + o[1].toString() + "/" ,/"id/" :/""
+ o[0].toString() + "/" ,/"cls/" :/"folder/"}");
}
i++;
}
} else {
this.setJsonString("");
}
System.out.println(this.getJsonString());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return this.INPUT;
}
return this.SUCCESS;
}
運行時的圖：
文章出處：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2008624/127992.html)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
