ITOO-EasyUI动态菜单加载

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

 

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

 

// 这里显示的相当于上方的图片
Edit
// 这里显示的主菜单下的子模块

	
Help
	
Update
	
About

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

  1.html

 

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 systemList=new ArrayList();
		String strStyle ="";
		String total ="";
		systemList = applicationBean.queryParentApplication();
		if(systemList.size() < 1 || systemList == null){
			JsonUtils.outJson(response, "");		
		}else{
			strStyle +="
";
			for(int i =0;i"+ app.getApplicationName().substring(0,2) +"";
				
				System.out.print(app.getId());
				
				total += "
";		
				
				total += getChildLink(app.getId(),app.getApplicationName());
				
				total += "
";
				
			}
			strStyle += "帮助
";
		}
	
		 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){
	//	
专业分流管理
		String total ="";
		List childList=new ArrayList();
		childList =applicationBean.queryApplicationByParentId(parentId);
		if(childList.size() < 1 || childList == null){
			return total;
		}else{
			// 步骤2：拼接各个子模块的div
			for(int i=0;i"+app.getApplicationName()+"

"; // }else{ //步骤3.2 拼接不加id // total += "

"+app.getApplicationName()+"

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

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