ITOO

    在ITOO中，我们的右上角有几个菜单，一直想把它做成类似今目标的存在，后台可以配置 。时至今日，终于成功了，下面是我的一点思路：

 

  根据EasyUI中菜单按钮的加载Demo，如下，可以看出菜单的加载实现方式：

 

[html] view plaincopy

1. // 这里显示的相当于上方的图片  
2. <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-edit'">Edit</a>  
3. // 这里显示的主菜单下的子模块  
4. <div id="mm2" style="width:100px;">  
5.     <div>Help</div>  
6.     <div>Update</div>  
7.     <div>About</div>  
8. </div>  

菜单通过menu属性来加载其子模块，通过iconCls属性显示不同的图标。那么思路就是拼接这样的样式即可。在前台中，我通过页面加载完成后ajax同步调用controller查询系统及模块级别的菜单，放入到html的div中。

  1.html

 

[html] view plaincopy

1. <div id="aa">  
2.   
3. </div>  

2.js。

  页面加载完成后，通过js调用后台，然后根据查询出的系统和模块的json，append到这个div中。

 

[javascript] view plaincopy

1. $(function(){  
2.     // 页面加载的时候调用，查询系统的模块  
3.         $.ajax({  
4.                   type: "GET",  
5.                   url: 'getSystem',  
6.                   data: {},  
7.                   dataType: "html",  
8.                   success: function(data){  
9.                    $('#aa').append(data);  
10.                    $.parser.parse('#aa');  
11.                   }  
12.         });  
13.      })  

这里通过$.parser.parse('#aa')这句话，可以重新解析页面，这里解析的是div标签 内容，使其可以有css的样式，相当于一个布局的刷新。

3.Controller层

  controller层主要是拼接需要的字符串，首先查询系统级别的，然后循环根据系统的id去查询各模块下的内容。

 

[java] view plaincopy

1. /** 
2.      * 查询系统的列表框 
3.      * @param response 
4.      */  
5.     @RequestMapping("/getSystem")  
6.     public void getTrendsLink(HttpServletResponse response){  
7.         List<Application> systemList=new ArrayList<Application>();  
8.         String strStyle ="";  
9.         String total ="";  
10.         systemList = applicationBean.queryParentApplication();  
11.         if(systemList.size() < 1 || systemList == null){  
12.             JsonUtils.outJson(response, "");          
13.         }else{  
14.             strStyle +="<div style=\"float:right; margin-right:4%; margin-top:15px;\">";  
15.             for(int i =0;i<systemList.size();i++){  
16.                 Application app =(Application)systemList.get(i);  
17.                 //步骤1：拼接系统最外层的div标签  
18.                 strStyle += "<a href=\"javascript:void(0)\" class=\"easyui-menubutton\" style=\"width:46px; height:56px;margin-left:4px;\" data-options=\"size:'large',iconCls:'"+app.getId()+"',iconAlign:'top',plain:false,menu:'#"+app.getId()+"'\">"+ app.getApplicationName().substring(0,2) +"</a>";  
19.                   
20.                 System.out.print(app.getId());  
21.                   
22.                 total += "<div id=\""+app.getId()+"\" style=\"display: none\">";        
23.                   
24.                 total += getChildLink(app.getId(),app.getApplicationName());  
25.                   
26.                 total += "</div>";  
27.                   
28.             }  
29.             strStyle += "<a href=\"javascript:void(0)\" class=\"easyui-menubutton\" style=\"width: 46px; height: 56px;margin-left:4px;\" data-options=\"size:'large',iconCls:'icon-helpload',iconAlign:'top',plain:false\" onclick=\"javascript:$('#pg').pivotgrid('layout')\">帮助</a></div>";  
30.         }  
31.       
32.          System.out.println(strStyle+total);  
33.         JsonUtils.outJson(response,strStyle+total );//strStyle+total  
34.     }  
35.       
36.     /** 
37.      * 查询系统下的模块  
38.      * @param parentId 系统id 
39.      * @param name  系统名称 
40.      * @return  String字符串 
41.      */  
42.     public String getChildLink(String parentId,String name){  
43.     //  <div onclick="addTab('基础系统-专业分流管理','http://192.168.24.246:8091/itoo-basic-professional-web/toProfessionalList?id=DxdYBwWuz12MsPEnJdGksk')">专业分流管理</div>  
44.         String total ="";  
45.         List<Application> childList=new ArrayList<Application>();  
46.         childList =applicationBean.queryApplicationByParentId(parentId);  
47.         if(childList.size() < 1 || childList == null){  
48.             return total;  
49.         }else{  
50.             // 步骤2：拼接各个子模块的div  
51.             for(int i=0;i<childList.size();i++){  
52.                 Application app =(Application)childList.get(i);  
53.   
54.                 //步骤3： 判断模块下是否有其他页面，有——加上ID，没有则不加  
55.                 //if(getChildLink(app.getId(),app.getApplicationName()) !=""){  
56.                     //步骤3.1 拼接加上id  
57.                     total += "<div onclick=\"addTab('"+ name+'-'+app.getApplicationName() +"','"+app.getApplicationUrl()+"?id="+app.getId()+"')\">"+app.getApplicationName()+"</div>";  
58.             //  }else{  
59.                     //步骤3.2 拼接不加id  
60.             //      total += "<div onclick=\"addTab('"+ name+'-'+app.getApplicationName() +"','"+app.getApplicationUrl()+"')\">"+app.getApplicationName()+"</div>";  
61.             //  }  
62.             }  
63.         }  
64.         return total;  
65.     }  

最后根据返回值到ajax的回调函数中，就完美解决了动态加载菜单的问题。这里有点烦的就是controller拼接字符串，需要步步调试到EasyUI需要的格式，细心点都可以成功。

后续我们会加上shiro标签来根据登录的用户角色来动态显示各系统，系统还在一步步完善中，2.0加油！