在ITOO中，我们的右上角有几个菜单，一直想把它做成类似今目标的存在，后台可以配置 。时至今日，终于成功了，下面是我的一点思路：
根据EasyUI中菜单按钮的加载Demo，如下，可以看出菜单的加载实现方式：
// 这里显示的相当于上方的图片 <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-edit'">Edit</a> // 这里显示的主菜单下的子模块 <div id="mm2" style="width:100px;"> <div>Help</div> <div>Update</div> <div>About</div> </div>菜单通过menu属性来加载其子模块，通过iconCls属性显示不同的图标。那么思路就是拼接这样的样式即可。在前台中，我通过页面加载完成后ajax同步调用controller查询系统及模块级别的菜单，放入到html的div中。
1.html
<div id="aa"> </div>2.js。
页面加载完成后，通过js调用后台，然后根据查询出的系统和模块的json，append到这个div中。
$(function(){
// 页面加载的时候调用，查询系统的模块
$.ajax({
type: "GET",
url: 'getSystem',
data: {},
dataType: "html",
success: function(data){
$('#aa').append(data);
$.parser.parse('#aa');
}
});
}) 这里通过$.parser.parse(‘#aa‘)这句话，可以重新解析页面，这里解析的是div标签 内容，使其可以有css的样式，相当于一个布局的刷新。
3.Controller层
controller层主要是拼接需要的字符串，首先查询系统级别的，然后循环根据系统的id去查询各模块下的内容。
/**
* 查询系统的列表框
* @param response
*/
@RequestMapping("/getSystem")
public void getTrendsLink(HttpServletResponse response){
List<Application> systemList=new ArrayList<Application>();
String strStyle ="";
String total ="";
systemList = applicationBean.queryParentApplication();
if(systemList.size() < 1 || systemList == null){
JsonUtils.outJson(response, "");
}else{
strStyle +="<div style=\"float:right; margin-right:4%; margin-top:15px;\">";
for(int i =0;i<systemList.size();i++){
Application app =(Application)systemList.get(i);
//步骤1：拼接系统最外层的div标签
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>";
System.out.print(app.getId());
total += "<div id=\""+app.getId()+"\" style=\"display: none\">";
total += getChildLink(app.getId(),app.getApplicationName());
total += "</div>";
}
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>";
}
System.out.println(strStyle+total);
JsonUtils.outJson(response,strStyle+total );//strStyle+total
}
/**
* 查询系统下的模块
* @param parentId 系统id
* @param name 系统名称
* @return String字符串
*/
public String getChildLink(String parentId,String name){
// <div onclick="addTab('基础系统-专业分流管理','http://192.168.24.246:8091/itoo-basic-professional-web/toProfessionalList?id=DxdYBwWuz12MsPEnJdGksk')">专业分流管理</div>
String total ="";
List<Application> childList=new ArrayList<Application>();
childList =applicationBean.queryApplicationByParentId(parentId);
if(childList.size() < 1 || childList == null){
return total;
}else{
// 步骤2：拼接各个子模块的div
for(int i=0;i<childList.size();i++){
Application app =(Application)childList.get(i);
//步骤3： 判断模块下是否有其他页面，有——加上ID，没有则不加
//if(getChildLink(app.getId(),app.getApplicationName()) !=""){
//步骤3.1 拼接加上id
total += "<div onclick=\"addTab('"+ name+'-'+app.getApplicationName() +"','"+app.getApplicationUrl()+"?id="+app.getId()+"')\">"+app.getApplicationName()+"</div>";
// }else{
//步骤3.2 拼接不加id
// total += "<div onclick=\"addTab('"+ name+'-'+app.getApplicationName() +"','"+app.getApplicationUrl()+"')\">"+app.getApplicationName()+"</div>";
// }
}
}
return total;
} 最后根据返回值到ajax的回调函数中，就完美解决了动态加载菜单的问题。这里有点烦的就是controller拼接字符串，需要步步调试到EasyUI需要的格式，细心点都可以成功。
后续我们会加上shiro标签来根据登录的用户角色来动态显示各系统，系统还在一步步完善中，2.0加油！
原文地址：http://blog.csdn.net/a137151062/article/details/43232405
