利用Ext Js生成动态树实例代码

174 阅读 0 评论 115 点赞

我是靠谱客的博主欣喜大门，最近开发中收集的这篇文章主要介绍利用Ext Js生成动态树实例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一. 需求

要求生成一颗部门树，初始只列出根部门
当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点
部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单
二. 关键类

这里主要涉及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...哈哈