您的位置：首页 > Web前端 > JavaScript

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

2014-09-09 13:55 666 查看

一. 需求

要求生成一颗部门树，初始只列出根部门

当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点

部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单

二. 关键类

这里主要涉及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" />

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航