Easyui的tree和右键菜单

最新推荐文章于 2023-02-24 08:22:39 发布

weixin_34038652

最新推荐文章于 2023-02-24 08:22:39 发布

阅读量584

点赞数

文章标签： javascript json 数据库 ViewUI

原文链接：https://my.oschina.net/u/3788721/blog/1927983

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.html/jsp文件

<body>
<div style="margin:10px 0;"></div>
   <div class="easyui-panel" style="padding:5px">
       <ul id="tt" class="easyui-tree" >

       </ul>
   </div>
   
   <div id="mm" class="easyui-menu" style="width:120px;">
       <div οnclick="append()" data-options="iconCls:'icon-add'">增加子部门</div>
       <div οnclick="removeit()" data-options="iconCls:'icon-remove'">删除部门</div>
       <div class="menu-sep"></div>
       <div οnclick="insertNode()">增加部门</div>
       <div οnclick="updateNode()">编辑部门</div>
   </div>
</body>

2.js文件

        //单击组织树的节点时，同时grid去访问数据库获得相应的数据
               showStu();
           },
           onCollapse : function(node){
               /*
                   当节点收起来的时候，查找的子节点，并逐一删除
               */
               var children = $('#tt').tree("getChildren",node.target);
               if(children.length){
                   for (var i=0;i<children.length;i++){
                       $('#tt').tree("remove",children[i].target);
                   }
               }
           }
       });
   });
   //对数据进行处理，处理成树的形式:重写loadFilter --这个不是原创，不过在哪里看到就忘了
   $.fn.tree.defaults.loadFilter = function (data, parent) {
       var opt = $(this).data().tree.options;
       var idFiled,
       textFiled,
       parentField;
       if (opt.parentField) {
           idFiled = opt.idFiled || 'orgId';
           textFiled = opt.textFiled || 'orgName';
           parentField = opt.parentField || 'parentNodeCode';

           var i,
           l,
           treeData = [],
           tmpMap = [];

           for (i = 0, l = data.length; i < l; i++) {
               tmpMap[data[i][idFiled]] = data[i];
               //alert(data[i][idFiled]);// 节点的orgId :
           }

           for (i = 0, l = data.length; i < l; i++) {
               if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                   if (!tmpMap[data[i][parentField]]['children'])
                       tmpMap[data[i][parentField]]['children'] = [];
                   data[i]['text'] = data[i][textFiled];
                   tmpMap[data[i][parentField]]['children'].push(data[i]);
               } else {
                   data[i]['text'] = data[i][textFiled];
                   treeData.push(data[i]);
               }
           }
           return treeData;
       }
       return data;
   };

</script>

至于右键的四个方法就自己根据的业务逻辑实现

3/tree.json数据大概如下：重写的loadFilter会根据pid/parentNodeCode挂接成树

[
{
"orgId": 1,
"orgName": "Folder1"
},
{
"orgId": 2,
       "parentNodeCode": 1,
"orgName": "File1",
"checked": true
},
{
"orgId": 3,
       "parentNodeCode": 1,
"orgName": "Folder2",
"state": "open"
},
{
"orgId": 4,
"parentNodeCode": 3,
"orgName": "File3",
"checked": true

},
{
"orgId": 8,
"parentNodeCode": 3,
"orgName": "Async Folder"
},
{
"orgId": 9,
"orgName": "language",
"state": "closed"
},
{
"orgId": "j1",
"parentNodeCode": 9,
"orgName": "Java"
},
{
"orgId": "j2",
"parentNodeCode": 9,
"orgName": "C#"
}
]