关于EasyUI中的Tree

    2017年6月21日，天气阴。心情比较沉重。

    近期由于毕设的事情，三周不写代码了。这周测试提交了一些BUG，于是开始着手处理，还真的是熟能生巧，三周的功夫就感觉有点生疏。其中有一个BUG就是角色对应的菜单权限是写死的，理论上应该从数据库读取。其实之前一直知道应该这么做，只不过树这个功能确实耗了我很长时间，当时为了追赶进度就写死了。最开始我用的ZTree做的，花了三天时间没有做出来，后来我换成了EasyUI，树倒了显示出来了，只不过没有从数据库读数据。刚开始处理的时候还以为问题不大，把数据从数据库中拿到，在JS中按照规定好的格式拼凑就好了，没想到越做越复杂，目前的三级菜单就涉及三层for循环。起初写出来的时候每级菜单都循环了很多次，后来发现是加数据的位置不对，还有就是拼凑的时候格式有问题，本来应该是数组包含多个对象（对应各级菜单）的地方我只写了一个对象，后来换了很多次位置，并且完全按照之前写死的格式拼出来，终于一级菜单正常了，不过二、三级菜单依旧循环了很多次。试了很多次总是不行，问了一下同事聂兄，他过来帮我调试时发现原来是变量定义的问题，本来应该是局部变量，我定义成了全局变量，这就导致每次初始化的时候不是一个全新的变量，而是在原有基础上改变的变量。于是立刻把对应的变量修改，终于，功夫不负有心人，出来了。哈哈哈，内心还是蛮激动的！经过这件事我有几点感想：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>

 

转载于:https://www.cnblogs.com/sushu-yaya/p/7058518.html