1. 程式人生 > >EasyUI 樹型選單 非同步載入樹

EasyUI 樹型選單 非同步載入樹

問題描述:想用EasyUI實現樹結構,點選加號時,展開的子節點不正確。

問題解決: 展開第一層節點和展開其他子節點一樣,可以呼叫一個方法。當前節點的id能自動傳到後臺。

效果圖:EasyUI樹

關鍵程式碼: 後臺是SpringMVC+mybatis+Spring,控制層程式碼如下:

	/**
	 * 載入子節點
	 * @param model
	 * @param pid
	 * @return
	 */
	@RequestMapping(value = "/getChildren")
	@ResponseBody
	public List<Menu> getChildren(Model model,HttpServletRequest request) {
		//System.out.println("父節點ID="+id);
		String id=request.getParameter("id");
		if(id==null){
			id="0";
		}
		List<Menu> data = menuService.getChildren(Integer.valueOf(id));
		return data;		
	}

上述返回json型別的資料到前臺,格式為:

[{"id":1,"text":"系統選單","state":"closed",pid:0},
{"id":2,"text":"管理員","state":"open",pid:1},
{"id":3,"text":"資料字典","state":"open",pid:1}]

前臺呼叫的方法:

html部分:

<ul id="tree_menu" class="easyui-tree" >  </ul>

JS部分:

	//初始化方法
	$(function(){
		
		//載入全部節點
		$("#tree_menu").tree({
			 url: '<%=request.getContextPath() %>/manage/menu/getChildren',
			 animate:true,
			 lines:true,
	         onClick: function (node) {
	        	 //右側跳轉到指定頁面
	        	addTab(node.text,node.menuUrl);    	
	             
	         }
		});
	});