|
|
要求生成一顆部門樹，初始只列出根部門
當點擊一個部門節點時，動態載入該部門下的直屬子部門，并展開該部門節點
部門節點要求支持右鍵單擊事件，當點擊右鍵時，列出相關操作菜單
二. 關鍵類
這里主要涉及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>現在要生成一顆動態樹</h1>
<div id="container">
</div>
</body>
</html>
2. 再看一下生成樹的函數
復制代碼 代碼如下:
/***********************************
創建樹
by chb
************************************/
function createTree(n){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"Extjs動態樹",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:"30%",
lines:true
});
//根節點
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:{
//監聽單擊事件
"click":function(node){
myExpand(node);
},
//監聽右鍵
"contextmenu":function(node,e){
//列出右鍵菜單
menu=new Ext.menu.Menu([
{
text:"打開當前節點",
icon:"list.gif",
handler:function(){
myExpand(node);
}
},
{
text:"編輯當前節點",
icon:"list.gif",
handler:function(){
alert(node.id);
}
},
{
text:"刪除當前節點",
icon:"list.gif",
handler:function(){
alert(node.id);
}
}]);
//顯示在當前位置
menu.showAt(e.getPoint());
}
}
});
root.appendChild(sub1);
}
mytree.setRootNode(root);//設置根節點
mytree.render();//不要忘記render()下,不然不顯示哦
}
3. 展開子節點的代碼
復制代碼 代碼如下:
/******************************************
展開節點
******************************************/
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:{//監聽
"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:{//監聽
"click":function(node){
expand2(node)
}
}
}));
}else{
alert(node.id+"沒有子部門了");
}
}
讀者可以自己運行一下如上代碼，會發現如下現象：無論點擊“子公司1”多少次，只會列出“子公司1的第一個兒子”一個節點，而每點擊一次“子公司2”，就會多出一個“子公司2的第一個兒子”節點，這是為什么呢？
因為每次點擊都會激發myExpand函數，而“子公司1”上加了node.item(0)==undefined的判斷，這里明白了？
即：如果該部門下沒有子部門，則載入子部門，否則只展開，不重新載入。
好了，就到這里吧，困了，就不詳細解釋了o(∩_∩)o...哈哈
JavaScript技術：利用Ext Js生成動態樹實例代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
