利用Ext Js產生動態樹執行個體代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一. 需求

要求產生一顆部門樹，初始只列出根部門
當點擊一個部門節點時，動態載入該部門下的直屬子部門，並展開該部門節點
部門節點要求支援按右鍵事件，當點擊右鍵時，列出相關操作菜單
二. 關鍵類

這裡主要涉及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>

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../shared/lib.css" />

</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...哈哈

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

利用Ext Js產生動態樹執行個體代碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support