利用Ext Js生成动态树

 利用Ext Js生成动态树

 

    今天在公司帮同事写了个用Ext Js生成动态树的Demo,在这里分享一下,也好供以后自己查阅。

一. 需求

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

二. 关键类

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

  • Ext.tree.TreeNode
  • Ext.menu.Menu

相关API可以参考:http://extjs.com/deploy/ext/docs/

三. 代码示例

1. 先看一下测试页面

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>Reorder TreePanel</title>
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  6. <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  7. <script type="text/javascript" src="../../ext-all.js"></script>
  8. <script type="text/javascript" src="reorder.js"></script>
  9. <!-- Common Styles for the examples -->
  10. <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  11. <link rel="stylesheet" type="text/css" href="../shared/lib.css" />
  12. <script type="text/javascript">
  13. /**************
  14.     onload事件
  15. ***************/
  16. window.onload=function(){
  17.     createTree(3);
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <script type="text/javascript" src="../shared/examples.js"></script>
  23. <h1>现在要生成一颗动态树</h1>
  24. <div id="container">
  25.     </div>
  26. </body>
  27. </html>

2. 再看一下生成树的函数

  1. /***********************************
  2.     创建树
  3.     by chb
  4. ************************************/
  5. function createTree(n){
  6.     Ext.QuickTips.init();
  7.     var mytree=new Ext.tree.TreePanel({
  8.       el:"container",
  9.       animate:true,
  10.       title:"Extjs动态树",
  11.       collapsible:true,
  12.       enableDD:true,
  13.       enableDrag:true,
  14.       rootVisible:true,
  15.       autoScroll:true,
  16.       autoHeight:true,
  17.       width:"30%",
  18.       lines:true
  19.     });
  20.   
  21.   //根节点
  22.   var root=new Ext.tree.TreeNode({
  23.       id:"root",
  24.       text:"集团公司",
  25.       expanded:true
  26.   });
  27.     for(var i=0;i<n;i++){
  28.         var sub1=new Ext.tree.TreeNode({
  29.         id:i+1,
  30.         text:"子公司"+(i+1),
  31.         singleClickExpand:true,
  32.         listeners:{
  33.             //监听单击事件
  34.             "click":function(node){
  35.                 myExpand(node);
  36.             },
  37.             //监听右键
  38.             "contextmenu":function(node,e){
  39.                 //列出右键菜单
  40.                 menu=new Ext.menu.Menu([
  41.                   {
  42.                     text:"打开当前节点",
  43.                     icon:"list.gif",
  44.                     handler:function(){
  45.                         myExpand(node);
  46.                     }
  47.                 },
  48.                 {
  49.                         text:"编辑当前节点",
  50.                         icon:"list.gif",
  51.                         handler:function(){
  52.                             alert(node.id);
  53.                         }
  54.                 },
  55.                 {
  56.                         text:"删除当前节点",
  57.                         icon:"list.gif",
  58.                         handler:function(){
  59.                             alert(node.id);
  60.                         }
  61.                 }]);
  62.                 //显示在当前位置
  63.                 menu.showAt(e.getPoint());
  64.             }
  65.         }
  66.       });
  67.         root.appendChild(sub1);
  68.     }
  69.  mytree.setRootNode(root);//设置根节点
  70.  mytree.render();//不要忘记render()下,不然不显示哦
  71. }

3. 展开子节点的代码

  1. /******************************************
  2.              展开节点
  3. ******************************************/
  4. function myExpand(node){
  5.     if(node.id=='1'){
  6.     if(node.item(0)==undefined){
  7.             node.appendChild(new Ext.tree.TreeNode({
  8.         id:node.id+'1',
  9.         text:node.text+"的第一个儿子",
  10.         hrefTarget:"mainFrame",
  11.         listeners:{//监听
  12.           "click":function(node,e){
  13.             expand2(node)
  14.             }
  15.         }
  16.         }));
  17.     }
  18.     node.expand();
  19.     }else if(node.id=='2'){
  20.         node.appendChild(new Ext.tree.TreeNode({
  21.         id:node.id+'2',
  22.         text:node.text+"的第一个儿子",
  23.         hrefTarget:"mainFrame",
  24.         listeners:{//监听
  25.           "click":function(node){
  26.             expand2(node)
  27.             }
  28.         }
  29.         }));
  30.     }else{
  31.         alert(node.id+"没有子部门了");
  32.     }
  33.     
  34. }

     读者可以自己运行一下如上代码,会发现如下现象:无论点击“子公司1”多少次,只会列出“子公司1的第一个儿子”一个节点,而每点击一次“子公司2”,就会多出一个“子公司2的第一个儿子”节点,这是为什么呢?

 

因为每次点击都会激发myExpand函数,而“子公司1”上加了node.item(0)==undefined的判断,这里明白了?

即:如果该部门下没有子部门,则载入子部门,否则只展开,不重新载入。

利用Ext Js生成动态树_第1张图片

 

好了,就到这里吧,困了,就不详细解释了o(∩_∩)o...哈哈

你可能感兴趣的:(function,api,ext,ExtJs,menu,stylesheet)