About Tree in EasyUI

On June 21, 2017, the weather was overcast. My heart is heavy.

Recently, due to bi Shi, I don't write code for three weeks. I submitted some bugs in the test this week, so I started to deal with them. Practice makes perfect. I feel a little rusty after three weeks. One BUG is that the menu permission corresponding to the role is written dead. Theoretically, it should be read from the database. In fact, I always knew that I should do this before, but the function of tree really took me a long time. At that time, I wrote it to death in order to catch up with the progress. At first, I used ZTree to do it, but it took me three days to do it. Later, I changed to EasyUI, and the tree fell down and displayed it, but I didn't read the data from the database. At the beginning of processing, I thought it was not a big problem. Just get the data from the database and put it together in JS according to the specified format. I didn't expect it to become more and more complex. The current three-level menu involves a three-tier for loop. At first, when I wrote it out, each level of the menu cycled many times. Later, I found that the position of adding data was wrong, and there was a problem with the format when I pieced it together. Where the array should contain multiple objects (corresponding to menus at all levels), I wrote only one object. Later, I changed the position many times and spelled it out completely according to the previously written format. Finally, the level 1 menu was normal, but 2 The three-level menu still circulates many times. After trying many times, I always failed. I asked my colleague brother Nie. When he came to help me debug, he found that it was the problem of variable definition. It should have been a local variable, but I defined it as a global variable. This led to that each initialization was not a new variable, but a variable changed on the original basis. So he immediately modified the corresponding variables. Finally, the effort paid off and came out. Hahaha, I'm still very excited! After this, I have several thoughts: 1 Try to consider all the problems before development, otherwise it will be troublesome to modify and maintain in the later stage; 2. Don't panic, think calmly and examine the problem from multiple angles. As long as you find the problem, it can be solved quickly.

Last night, I saw a sentence by Nietzsche that "a person can survive if he knows why he lives." There are also the four words "learn to be a good man" given to Heiwa by Mr. Zhu in the White Deer Plain. I feel very philosophical. Take it out and share it with you.

No more nonsense. Go straight to the code.

1.controller query menu program

 1 /**
 2      * Query authority
 3      * 
 4      * @param 
 5      * @return Permission list
 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     }

Note: Dao layer interface and Service layer call Dao layer interface, which will not be repeated here.

2. Core part - JS three-layer traversal

 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 })

Program to get Tree menu 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 code

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

 

Tags: Front-end

Posted by surreal5335 on Sun, 22 May 2022 17:06:32 +0300