easyUI-tree menu (ComboTree) infinite level tree implementation

     For easyUI to implement a tree, it is a very simple thing, and there are many forms of implementation.

     Here the author will realize that the data is obtained through the database, and then the data is loaded into infinite-level json data in a recursive form to reach an infinite-level tree structure.

     The json plug-in that needs to be used to build the attachment, I hope it can be helpful to everyone

     The effect is
      realized step by step

          1. Data table design (role table)       

CREATE TABLE `role` (
  `id` varchar(32) NOT NULL,
  `createDate` datetime NOT NULL,
  `modifyDate` datetime NOT NULL,
  `name` varchar(64) NOT NULL,
  `isSystem` bit(1) NOT NULL,
  `description` varchar(256) NOT NULL,
  `fatherId` varchar(32) default '0' COMMENT '父id',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

          2. Entity class

/**
 * Entity class - role
 */
public class Role extends BaseEntity {

	private static final long serialVersionUID = -6614052029623997372L;
	private String name; //role name
	private Boolean isSystem; //Whether it is a built-in role for the system
	private String description;				//描述
	private List<Admin> adminList; //Administrator
	private List<Resource> resourceList;	//资源
	
	private String fatherId; //parent role id
	private String fatherName; //Name of parent role
	
	private String children; // child roles
	private String checked; //Whether the node is selected

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
	public Boolean getIsSystem() {
		return isSystem;
	}

	public void setIsSystem(Boolean isSystem) {
		this.isSystem = isSystem;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public List<Admin> getAdminList() {
		return adminList;
	}

	public void setAdminList(List<Admin> adminList) {
		this.adminList = adminList;
	}

	public List<Resource> getResourceList() {
		return resourceList;
	}

	public void setResourceList(List<Resource> resourceList) {
		this.resourceList = resourceList;
	}

	public String getFatherId() {
		return fatherId;
	}

	public void setFatherId(String fatherId) {
		this.fatherId = fatherId;
	}

	public String getFatherName() {
		return fatherName;
	}

	public void setFatherName(String fatherName) {
		this.fatherName = fatherName;
	}

	public String getChildren() {
		return children;
	}

	public void setChildren(String children) {
		this.children = children;
	}

	public String getChecked() {
		return checked;
	}

	public void setChecked(String checked) {
		this.checked = checked;
	}
}

        3. The key code that encapsulates the role into an infinite level of json data, and the front-end js call method

// store the collection of converted data
List<Map<String,Object>> comboTreeList  =new ArrayList<Map<String,Object>>();

/**
 * Returns the json format data required by treeGrid (tree form)
 * This method is called by the front end
 */
@SuppressWarnings("unchecked")
public String backComboTreeTreeRole(){
        // get all characters
	List <Role> list = roleService.getRoleAll ();
	
	/ / Call the method to implement the role tree
	createComboTreeTree(list,"0");
	
	/ / Convert the collection to json output to the page
	Gson gson = new Gson ();
	String json = gson.toJson(comboTreeList);
	
	try {
		ServletActionContext.getResponse().getWriter().print(json);
		ServletActionContext.getResponse().getWriter().flush();
		ServletActionContext.getResponse().getWriter().close();
	}catch (IOException e) {
		e.printStackTrace ();
	}   
	
	System.out.println(json);
	return null;
}


/**
 * Start by encapsulating the character into a tree
 * @param list
 * @param fid 父 id
 */
private void createComboTreeTree(List<Role> list, String fid) {
	for (int i = 0; i < list.size(); i++) {
		Map<String, Object> map = null;
		Role role = (Role) list.get(i);
		if (role.getFatherId().equals("0")) {
			map = new HashMap<String, Object>();
			//Here, the id and name of the object role must be converted into the display form id, text of the ComboTree on the page
			//ComboTree, not a data table, there is no attribute to convert data through columns on the page
			map.put("id", list.get(i).getId());			//id
			map.put("text",list.get(i).getName());		//角色名
			map.put("children", createComboTreeChildren(list, role.getId()));
		}
		if (map != null)
			comboTreeList.add(map);
	}
}


/**
 * recursively set the role tree
 * @param list
 * @param fid
 * @return
 */
private List<Map<String, Object>> createComboTreeChildren(List<Role> list, String fid) {
	List<Map<String, Object>> childList = new ArrayList<Map<String, Object>>();
	for (int j = 0; j < list.size(); j++) {
		Map<String, Object> map = null;
		Role treeChild = (Role) list.get(j);
		if (treeChild.getFatherId().equals(fid)) {
			map = new HashMap<String, Object>();
			//Here, the id and name of the object role must be converted into the display form id, text of the ComboTree on the page
			//ComboTree, not a data table, there is no attribute to convert data through columns on the page
			map.put("id", list.get(j).getId());
			map.put("text", list.get(j).getName());
			map.put("children", createComboTreeChildren(list, treeChild.getId()));
		}
		
		if (map != null)
			childList.add(map);
	}
	return childList;
}

  

 

    jsp page code:

<td>
	<input type="text" name="role.fatherId" <#if role.fatherId == ""> value="0" <#else> value="${role.fatherId}" </#if> hidden = "true"/>
	<div id= "comboTree" style="margin-left:0; high:60px; padding-bottom:2px; padding-top:2px; width:210px;"></div>
</td>

   

    js code:

$(function(){
	// load tree
	$('#comboTree').combotree({      
        url:'role!backComboTreeTreeRole.action',
        onClick:function(node){
    		// Triggered when a single user clicks a node
        	$("input[name='role.fatherId']").val(node.id);
    	},
        checkbox:false,
        multiple:false
    });
});