利用Easy UI生成异步树以及动态添加标签页

生成异步树

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属性来动态添加一个标签页