關於EasyUI中的Tree

    2017年6月21日，天氣陰。心情比較沉重。

    近期因爲畢設的事情，三週不寫代碼了。這周測試提交了一些BUG，因而開始着手處理，還真的是熟能生巧，三週的功夫就感受有點生疏。其中有一個BUG就是角色對應的菜單權限是寫死的，理論上應該從數據庫讀取。其實以前一直知道應該這麼作，只不過樹這個功能確實耗了我很長時間，當時爲了追趕進度就寫死了。最開始我用的ZTree作的，花了三天時間沒有作出來，後來我換成了EasyUI，樹倒了顯示出來了，只不過沒有從數據庫讀數據。剛開始處理的時候還覺得問題不大，把數據從數據庫中拿到，在JS中按照規定好的格式拼湊就行了，沒想到越作越複雜，目前的三級菜單就涉及三層for循環。起初寫出來的時候每級菜單都循環了不少次，後來發現是加數據的位置不對，還有就是拼湊的時候格式有問題，原本應該是數組包含多個對象（對應各級菜單）的地方我只寫了一個對象，後來換了不少次位置，而且徹底按照以前寫死的格式拼出來，終於一級菜單正常了，不過2、三級菜單依舊循環了不少次。試了不少次老是不行，問了一下同事聶兄，他過來幫我調試時發現原來是變量定義的問題，原本應該是局部變量，我定義成了全局變量，這就致使每次初始化的時候不是一個全新的變量，而是在原有基礎上改變的變量。因而馬上把對應的變量修改，終於，功夫不負有心人，出來了。哈哈哈，心裏仍是蠻激動的！通過這件事我有幾點感想：1.在開發以前儘可能把該考慮的問題都考慮到，否則後期修改和維護會很麻煩；2.遇事不要慌張，冷靜地思考，從多角度審視問題，只要找到問題所在，解決仍是比較快的。

    昨晚看到一句話，尼采的「一我的知道本身爲何而活着，便能生存。」還有《白鹿原》中朱先生送給黑娃的「學爲好人」四個字。感受都頗有哲理，拿出來與君分享。

　　廢話很少說了，直接上代碼。

1.controller查詢菜單程序

 1 /**
 2      * 查詢權限
 3      * 
 4      * @param 
 5      * @return 權限列表
 6      */
 7     @RequestMapping(value = "selectmenu", method = RequestMethod.GET)
 8     @ResponseBody
 9     public R queryMenu() {
10         List<Menu> listmenu = roleService.queryMenu();    
11         return R.ok().putData(listmenu);
12     }

備註：Dao層接口和Service層調用Dao層接口這裏就不贅述了。

2.核心部分—JS三層遍歷

 1 $(document).ready(function(){
 2     $.ajax({
 3         url:ctx+"/role/selectmenu",
 4         dataType:"json",
 5         type:"get",
 6         contentType : "application/x-www-form-urlencoded",
 7         async : false,
 8         success:function(data){        
 9             var list=data.data;
10             var length = list.length;
11             var pmenuid;
12             var cmenuid;
13             var menuid;
14             var pname;
15             var cname;
16             var name;
17             var datas = [];        
18             var data1;
19             for(var i=0;i<length;i++){        
20                 if(list[i].type==0){
21                     pmenuid = list[i].menuId;
22                     pname = list[i].name;
23                     var menu2 = [];
24                     for(var j=0;j<length;j++){
25                         var data2;
26                             if(list[j].parentId==pmenuid){
27                                     cmenuid = list[j].menuId;
28                                     cname = list[j].name;    
29                                     var menu3 = [];
30                                     for(var k=0;k<length;k++){
31                                         var data3;
32                                             if(list[k].parentId==cmenuid){    
33                                                 menuid = list[k].menuId;
34                                                 name = list[k].name;
35                                                     data3={
36                                                             "id" : menuid,
37                                                             "text" : name    
38                                                     }
39                                                 menu3.push(data3);                            
40                                             }
41                             }
42                                     if(menu3!=null || menu3!=undefined){            
43                                         data2={
44                                                 "id" : cmenuid,
45                                                 "text" : cname,
46                                                 "children" : menu3
47                                         }        
48                                         menu2.push(data2);
49                                     }else{
50                                         data2={
51                                                 "id" : cmenuid,
52                                                 "text" : cname,
53                                         }
54                                         menu2.push(data2);
55                                     }
56                             }
57                     }
58                     data1 = {
59                             "id" : pmenuid,
60                             "text" : pname,
61                             "children" : menu2
62                         }
63                     datas.push(data1);
64                 }
65                 
66             }
67             $(function() {
68                 $("#tt").tree({
69                     data : datas,
70                     checkbox : true,
71                     cascadeCheck : false,
72                     onCheck : function(node, checked) {
73                         if (checked) {
74                             var parentNode = $("#tt").tree('getParent', node.target);
75                             if (parentNode != null) {
76                                 $("#tt").tree('check', parentNode.target);
77                             }
78                         } else {
79                             var childNode = $("#tt").tree('getChildren', node.target);
80                             if (childNode.length > 0) {
81                                 for (var i = 0; i < childNode.length; i++) {
82                                     $("#tt").tree('uncheck', childNode[i].target);
83                                 }
84                             }
85                         }
86                     }
87                 });
88             });
89         }
90     });
91 })

獲取Tree菜單ID的程序

1 var arr = [];
2     var checkeds = $('#tt').tree('getChecked', 'checked');
3     for (var i = 0; i < checkeds.length; i++) {
4         arr.push(checkeds[i].id);
5     }
6     arr = arr.toString();

3.JSP代碼

1 <!--EasyUI樹-->
2             <ul id="tt" align="left"></ul>