利用Ext Js生成動(dòng)態(tài)樹實(shí)例代碼

更新時(shí)間：2008年09月08日 21:41:28 作者：

今天在公司幫同事寫了個(gè)用Ext Js生成動(dòng)態(tài)樹的Demo，在這里分享一下，也好供以后自己查閱。

一. 需求

要求生成一顆部門樹，初始只列出根部門
當(dāng)點(diǎn)擊一個(gè)部門節(jié)點(diǎn)時(shí)，動(dòng)態(tài)載入該部門下的直屬子部門，并展開該部門節(jié)點(diǎn)
部門節(jié)點(diǎn)要求支持右鍵單擊事件，當(dāng)點(diǎn)擊右鍵時(shí)，列出相關(guān)操作菜單
二. 關(guān)鍵類

這里主要涉及Ext JS的兩個(gè)類:

Ext.tree.TreeNode
Ext.menu.Menu
相關(guān)API可以參考：http://extjs.com/deploy/ext/docs/

三. 代碼示例

1. 先看一下測試頁面

復(fù)制代碼代碼如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Reorder TreePanel</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../../ext-all.js"></script> 
<script type="text/javascript" src="reorder.js"></script> 


<!-- Common Styles for the examples --> 
<link rel="stylesheet" type="text/css" href="../shared/examples.css" /> 
<link rel="stylesheet" type="text/css" href="../shared/lib.css" /> 


<script type="text/javascript"> 
/************** 
onload事件 
***************/ 
window.onload=function(){ 
createTree(3); 
} 
</script> 


</head> 
<body> 
<script type="text/javascript" src="../shared/examples.js"></script> 
<h1>現(xiàn)在要生成一顆動(dòng)態(tài)樹</h1> 
<div id="container"> 
</div> 
</body> 
</html>

2. 再看一下生成樹的函數(shù)

復(fù)制代碼代碼如下:

/*********************************** 
創(chuàng)建樹 
by chb 
************************************/ 
function createTree(n){ 


Ext.QuickTips.init(); 
var mytree=new Ext.tree.TreePanel({ 
el:"container", 
animate:true, 
title:"Extjs動(dòng)態(tài)樹", 
collapsible:true, 
enableDD:true, 
enableDrag:true, 
rootVisible:true, 
autoScroll:true, 
autoHeight:true, 
width:"30%", 
lines:true 
}); 

//根節(jié)點(diǎn) 
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"集團(tuán)公司", 
expanded:true 
}); 


for(var i=0;i<n;i++){ 
var sub1=new Ext.tree.TreeNode({ 
id:i+1, 
text:"子公司"+(i+1), 
singleClickExpand:true, 
listeners:{ 
//監(jiān)聽單擊事件 
"click":function(node){ 
myExpand(node); 
}, 
//監(jiān)聽右鍵 
"contextmenu":function(node,e){ 
//列出右鍵菜單 
menu=new Ext.menu.Menu([ 
{ 
text:"打開當(dāng)前節(jié)點(diǎn)", 
icon:"list.gif", 
handler:function(){ 
myExpand(node); 
} 
}, 
{ 
text:"編輯當(dāng)前節(jié)點(diǎn)", 
icon:"list.gif", 
handler:function(){ 
alert(node.id); 
} 
}, 
{ 
text:"刪除當(dāng)前節(jié)點(diǎn)", 
icon:"list.gif", 
handler:function(){ 
alert(node.id); 
} 
}]); 
//顯示在當(dāng)前位置 
menu.showAt(e.getPoint()); 
} 
} 
}); 
root.appendChild(sub1); 
} 
mytree.setRootNode(root);//設(shè)置根節(jié)點(diǎn) 
mytree.render();//不要忘記render()下,不然不顯示哦 
} 

3. 展開子節(jié)點(diǎn)的代碼

復(fù)制代碼代碼如下:

/****************************************** 
展開節(jié)點(diǎn) 
******************************************/ 
function myExpand(node){ 
if(node.id=='1'){ 
if(node.item(0)==undefined){ 
node.appendChild(new Ext.tree.TreeNode({ 
id:node.id+'1', 
text:node.text+"的第一個(gè)兒子", 
hrefTarget:"mainFrame", 
listeners:{//監(jiān)聽 
"click":function(node,e){ 
expand2(node) 
} 
} 
})); 
} 


node.expand(); 


}else if(node.id=='2'){ 
node.appendChild(new Ext.tree.TreeNode({ 
id:node.id+'2', 
text:node.text+"的第一個(gè)兒子", 
hrefTarget:"mainFrame", 
listeners:{//監(jiān)聽 
"click":function(node){ 
expand2(node) 
} 
} 
})); 
}else{ 
alert(node.id+"沒有子部門了"); 
} 
} 

讀者可以自己運(yùn)行一下如上代碼，會(huì)發(fā)現(xiàn)如下現(xiàn)象：無論點(diǎn)擊“子公司1”多少次，只會(huì)列出“子公司1的第一個(gè)兒子”一個(gè)節(jié)點(diǎn)，而每點(diǎn)擊一次“子公司2”，就會(huì)多出一個(gè)“子公司2的第一個(gè)兒子”節(jié)點(diǎn)，這是為什么呢？

因?yàn)槊看吸c(diǎn)擊都會(huì)激發(fā)myExpand函數(shù)，而“子公司1”上加了node.item(0)==undefined的判斷，這里明白了？
即：如果該部門下沒有子部門，則載入子部門，否則只展開，不重新載入。

好了，就到這里吧，困了，就不詳細(xì)解釋了o(∩_∩)o...哈哈

您可能感興趣的文章: