在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>
 

  1.html

		<div id="aa">
		
		</div>

  頁面載入完成後，通過js呼叫後臺，然後根據查詢出的系統和模組的json，append到這個div中。

	$(function(){
		// 頁面載入的時候呼叫，查詢系統的模組
   		$.ajax({
                   type: "GET",
                   url: 'getSystem',
                   data: {},
                   dataType: "html",
                   success: function(data){
            	       $('#aa').append(data);
            	       $.parser.parse('#aa');
                   }
   		});
      })
 

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;
	}
 

後續我們會加上shiro標籤來根據登入的使用者角色來動態顯示各系統，系統還在一步步完善中，2.0加油！