ITOO-EasyUI动态菜单加载

    在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\" οnclick=\"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 οnclick="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 οnclick=\"addTab('"+ name+'-'+app.getApplicationName() +"','"+app.getApplicationUrl()+"?id="+app.getId()+"')\">"+app.getApplicationName()+"</div>";
			//	}else{
					//步骤3.2 拼接不加id
			//		total += "<div οnclick=\"addTab('"+ name+'-'+app.getApplicationName() +"','"+app.getApplicationUrl()+"')\">"+app.getApplicationName()+"</div>";
			//	}
			}
		}
		return total;
	}

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

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