利用Easy UI生成非同步樹以及動態新增標籤頁

xcmercy發表於2017-12-16

生成非同步樹

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屬性來動態新增一個標籤頁



相關文章