一. 需求 要求生成一颗部门树,初始只列出根部门 当点击一个部门节点时,动态载入该部门下的直属子部门,并展开该部门节点 部门节点要求支持右键单击事件,当点击右键时,列出相关操作菜单 二. 关键类 这里主要涉及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...哈哈