利用Ext Js生成動態(tài)樹實例代碼

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

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

一. 需求

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

這里主要涉及Ext JS的兩個類:

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

三. 代碼示例

1. 先看一下測試頁面

復制代碼代碼如下:

<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)在要生成一顆動態(tài)樹</h1> 
<div id="container"> 
</div> 
</body> 
</html>

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

復制代碼代碼如下:

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


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

//根節(jié)點 
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"集團公司", 
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:"打開當前節(jié)點", 
icon:"list.gif", 
handler:function(){ 
myExpand(node); 
} 
}, 
{ 
text:"編輯當前節(jié)點", 
icon:"list.gif", 
handler:function(){ 
alert(node.id); 
} 
}, 
{ 
text:"刪除當前節(jié)點", 
icon:"list.gif", 
handler:function(){ 
alert(node.id); 
} 
}]); 
//顯示在當前位置 
menu.showAt(e.getPoint()); 
} 
} 
}); 
root.appendChild(sub1); 
} 
mytree.setRootNode(root);//設置根節(jié)點 
mytree.render();//不要忘記render()下,不然不顯示哦 
} 

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

復制代碼代碼如下:

/****************************************** 
展開節(jié)點 
******************************************/ 
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+"的第一個兒子", 
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+"的第一個兒子", 
hrefTarget:"mainFrame", 
listeners:{//監(jiān)聽 
"click":function(node){ 
expand2(node) 
} 
} 
})); 
}else{ 
alert(node.id+"沒有子部門了"); 
} 
} 

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

因為每次點擊都會激發(fā)myExpand函數(shù)，而“子公司1”上加了node.item(0)==undefined的判斷，這里明白了？
即：如果該部門下沒有子部門，則載入子部門，否則只展開，不重新載入。

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

您可能感興趣的文章: