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>