zoukankan      html  css  js  c++  java

  • 利用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>
    10. <!-- Common Styles for the examples -->
    11. <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    12. <link rel="stylesheet" type="text/css" href="../shared/lib.css" />
    14. <script type="text/javascript">
    15. /**************
    16.     onload事件
    17. ***************/
    18. window.onload=function(){
    19.     createTree(3);
    20. }
    21. </script>
    23. </head>
    24. <body>
    25. <script type="text/javascript" src="../shared/examples.js"></script>
    26. <h1>现在要生成一颗动态树</h1>
    27. <div id="container">
    28.     </div>
    29. </body>
    30. </html>

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

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

    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.     }
    19.     node.expand();
    21.     }else if(node.id=='2'){
    22.         node.appendChild(new Ext.tree.TreeNode({
    23.         id:node.id+'2',
    24.         text:node.text+"的第一个儿子",
    25.         hrefTarget:"mainFrame",
    26.         listeners:{//监听
    27.           "click":function(node){
    28.             expand2(node)
    29.             }
    30.         }
    31.         }));
    32.     }else{
    33.         alert(node.id+"没有子部门了");
    34.     }
    35.     
    36. }

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

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

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

    截图

    好了，就到这里吧，困了，就不详细解释了o(∩_∩)o...哈哈
  • 相关阅读:
    code review
    自我封闭
    怎么验证？
    DRUPAL点滴
    CRLF CSRF XSS
    各种element/format 在manage display 下的选项
    html list <==> unformatted list
    ctrl + d 在phpstorm 和 eclipse 中的不同含义
    常量和变量的区别
    JSON和php里的数据序列化
  • 原文地址：https://www.cnblogs.com/hehe520/p/6330223.html
Copyright © 2011-2022 走看看