1. Generate an empty tree, which is usually placed in the west module using easyui layout

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

2. To obtain node information from the server, the json data returned by the backend must contain the following attributes: pid (parent node id), id, text, state, url.

be careful!!! : do not add the request string id=node.id after the url. easy ui will automatically add an ID (ID is the attribute value node. ID) request parameter in the form of a form. If the request string is added in the following form, the request parameter value of the background receiving ID will appear ID value, ID value.

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

The following is true:

$('#menuTree').tree({
			url: '${ctp}/menu/menuInfo',  //Send id to background to get root node  
            lines:true,  
            
            //Trigger before node opening
            onBeforeExpand:function(node){  
                $('#menuTree').tree('options').url = "${ctp}/menu/menuInfo?pid="+node.pid+"&flag="+node.flag;  
            },
            
            //Return the filtered data for display. The data returned here is used as the child node of the open node
            loadFilter: function(data){      
				if (data.msg){      
				     return data.msg;      
				} else {      
				    return data;      
				}      
			},  
					
			onClick: function(node){
				//If the node has a url attribute, open a tab
				if(node.url!=null){
					addTab(node.text, node.url,node.id);
				}
			}
		});

3. The design of node classes can be designed according to their own needs. Here, I post my own (a little messy)

/**
 * Encapsulate information about the current node of the menu
 * 
 * @author kun-24-1
 *
 */
public class KunMenuNode {

	// Parent node id of the current node
	private Integer pid;
	// id of the current node
	private Integer id;
	// Name of node display
	private String text;
	// The state of a node is open or closed
	private String state;
	// The url of the node
	private String url;

	// sign
	private int flag;
	// Icon
	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. The data returned by the controller is the data of the parent node, or the data of the child nodes found by the parent node, which is put into the List and converted into json data and returned to the client