关于EasyUI中的Tree

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

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

昨晚看到一句话，尼采的“一个人知道自己为什么而活着，便能生存。”还有《白鹿原》中朱先生送给黑娃的“学为好人”四个字。感觉都很有哲理，拿出来与君分享。

　　废话不多说了，直接上代码。

1.controller查询菜单程序

 /**
      * 查询权限
      *
      * @param
      * @return 权限列表
      */
     @RequestMapping(value = "selectmenu", method = RequestMethod.GET)
     @ResponseBody
     public R queryMenu() {
         List<Menu> listmenu = roleService.queryMenu();
         return R.ok().putData(listmenu);
     }

备注：Dao层接口和Service层调用Dao层接口这里就不赘述了。

2.核心部分—JS三层遍历

 $(document).ready(function(){
     $.ajax({
         url:ctx+"/role/selectmenu",
         dataType:"json",
         type:"get",
         contentType : "application/x-www-form-urlencoded",
         async : false,
         success:function(data){
             var list=data.data;
             var length = list.length;
             var pmenuid;
             var cmenuid;
             var menuid;
             var pname;
             var cname;
             var name;
             var datas = [];
             var data1;
             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             }
             $(function() {
                 $("#tt").tree({
                     data : datas,
                     checkbox : true,
                     cascadeCheck : false,
                     onCheck : function(node, checked) {
                         if (checked) {
                             var parentNode = $("#tt").tree('getParent', node.target);
                             if (parentNode != null) {
                                 $("#tt").tree('check', parentNode.target);
                             }
                         } else {
                             var childNode = $("#tt").tree('getChildren', node.target);
                             if (childNode.length > 0) {
                                 for (var i = 0; i < childNode.length; i++) {
                                     $("#tt").tree('uncheck', childNode[i].target);
                                 }
                             }
                         }
                     }
                 });
             });
         }
     });
 })

获取Tree菜单ID的程序

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

3.JSP代码

 <!--EasyUI树-->
             <ul id="tt" align="left"></ul>