Easyui的tree和右鍵菜單

時間 2019-11-11

標籤 easyui tree 右鍵菜單简体版

原文原文鏈接

1.html/jsp文件javascript

<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 onclick="append()" data-options="iconCls:'icon-add'">增長子部門</div>
       <div onclick="removeit()" data-options="iconCls:'icon-remove'">刪除部門</div>
       <div class="menu-sep"></div>
       <div onclick="insertNode()">增長部門</div>
       <div onclick="updateNode()">編輯部門</div>
   </div>
</body>html

2.js文件java

        //單擊組織樹的節點時，同時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>json

至於右鍵的四個方法就本身根據的業務邏輯實現app

3/tree.json數據大概以下：重寫的loadFilter會根據pid/parentNodeCode掛接成樹jsp

[
{
"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#"
}
]ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。