Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 19:01:04
Original
1103 Leute haben es durchsucht

一. 需求

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

这里主要涉及Ext JS的两个类:

Ext.tree.TreeNode
Ext.menu.Menu
相关API可以参考:http://extjs.com/deploy/ext/docs/

三. 代码示例

1. 先看一下测试页面

复制代码 代码如下:




Reorder TreePanel

















现在要生成一颗动态树







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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!