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>