关于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>