• 关于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>
  • 相关阅读:
    js 判断表单是否为空和是否是有效数字
    jsp获取url路径的方法
    Table 'jiang.hibernate_sequence' doesn't exist
    Struts 2中的constant详解【转载】
    禁用ubuntu启用虚拟内存swap
    1
    Struts+Spring+Hibernate整合入门详解
    Posting JSON to Spring MVC Controller
    JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
    利用MAVEN打包时,如何包含更多的资源文件
  • 原文地址:https://www.cnblogs.com/sushu-yaya/p/7058518.html
Copyright © 2020-2023  润新知