生成非同步樹

1.生成一個空樹，一般放在使用easyui佈局的west模組中

<ul id="menuTree" class="easyui-tree">

2.從伺服器獲取節點資訊，後端返回的json資料需包含以下屬性：pid（父節點id）、id、text、state、url。 注意！！！：千萬不要在url後面加再加請求字串id=node.id，easy ui本身會自動以表單的形式新增一個id（id是節點的屬性值node.id）請求引數。如果加了請求字串如下形式，後臺接收id的請求引數值會出現    id值,id值   這種情況。

$('#kunlunMenuTree').tree('options').url = "${ctp}/menu/menuInfo?id="+node.id;
 

下面的寫法是正確的：

$('#menuTree').tree({
			url: '${ctp}/menu/menuInfo',  //向後臺傳送id,獲取根節點  
            lines:true,  
            
            //節點點開前觸發
            onBeforeExpand:function(node){  
                $('#menuTree').tree('options').url = "${ctp}/menu/menuInfo?pid="+node.pid+"&flag="+node.flag;  
            },
            
            //返回過濾過的資料進行展示，這裡返回的資料作為點開節點的子節點
            loadFilter: function(data){      
				if (data.msg){      
				     return data.msg;      
				} else {      
				    return data;      
				}      
			},  
					
			onClick: function(node){
				//如果節點有url屬性，則開啟一個標籤頁
				if(node.url!=null){
					addTab(node.text, node.url,node.id);
				}
			}
		});
 

3.節點類的設計，可按自己需求去設計，這裡貼上我自己的（有點亂）

/**
 * 封裝選單當前節點的相關資訊
 * 
 * @author kun-24-1
 *
 */
public class KunMenuNode {

	// 當前節點的父節點id
	private Integer pid;
	// 當前節點的id
	private Integer id;
	// 節點顯示的名字
	private String text;
	// 節點的狀態 open或者closed
	private String state;
	// 節點的url
	private String url;

	// 標誌
	private int flag;
	// 圖示
	private String iconCls;

	public KunMenuNode() {
		super();
	}

	public KunMenuNode(Integer pid, Integer id, String text, String state, String url, int flag, String iconCls) {
		super();
		this.pid = pid;
		this.id = id;
		this.text = text;
		this.state = state;
		this.url = url;
		this.iconCls = iconCls;
		this.flag = flag;
	}

	

	public Integer getPid() {
		return pid;
	}

	public void setPid(Integer pid) {
		this.pid = pid;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getState() {
		return state;
	}

	public void setState(String state) {
		this.state = state;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public int getFlag() {
		return flag;
	}

	public void setFlag(int flag) {
		this.flag = flag;
	}

	public String getIconCls() {
		return iconCls;
	}

	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}

}
 

4.Controller返回的是父節點資料，或者是根據父節點查出來的子節點的資料，放到List中，轉換為json資料返回給客戶端即可

動態新增標籤頁tabs

1. 建立一個放置標籤頁的div標籤，一般放在Easy ui佈局的center區域

<div id="mainTabs" class="easyui-tabs" data-options="fit:true"></div>

2. 建立動態新增tab的函式

function addTab(title, url,id) {
	    if ($('#mainTabs').tabs('exists', title)) {
	        $('#mainTabs').tabs('select', title);
	    } else {
	        var content = '<iframe scrolling="auto" frameborder="0"  src="${ctp}/menu/' + url + '?id='+id+'" style="width:100%;height:100%;"></iframe>';
	        $('#mainTabs').tabs('add', {
	            title: title,
	            content: content,
	            closable: true,
	        });
	    }
	}

3. 在需要新增標籤頁的地方呼叫此函式即可，比如上述新增樹選單項被點選的時候，會根據當前節點是否有url屬性來動態新增一個標籤頁