easyUI-TreeGrid implements unlimited hierarchical menus

     For easyUI to implement a tree form, 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-shaped table 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

/**
 * 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-xiongmin
	private String fatherName; //parent role name-xiongmin
	
	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>> treeGridList  =new ArrayList<Map<String,Object>>();
/**
 * Returns the json format data required by treeGrid (tree form)
 */
public String backTreeGridTreeRole(){
	// get all characters
	List <Role> list = roleService.getRoleAll ();
	
	/ / Call the method to implement the role tree
	createTreeGridTree(list,"0");
	
	/ / Convert the collection to json output to the page
	Gson gson = new Gson ();
	String json = gson.toJson(treeGridList);
	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 createTreeGridTree(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>();
			//It doesn't matter how you turn it here, because the easyUI plugin treeGrid on the page provides the columns attribute for data conversion, see the relevant js code for details
			map.put("id", list.get(i).getId());			//id
			map.put("name", list.get(i).getName());		//角色名
			map.put("children", createTreeGridChildren(list, role.getId()));
		}
		if (map != null)
			treeGridList.add(map);
	}
}


/**
 * recursively set the role tree
 * @param list
 * @param fid
 * @return
 */
private List<Map<String, Object>> createTreeGridChildren(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>();
			//It doesn't matter how you turn it here, because the easyUI plugin treeGrid on the page provides the columns attribute for data conversion, see the relevant js code for details
			map.put("id", list.get(j).getId());
			map.put("name", list.get(j).getName());
			map.put("children", createTreeGridChildren(list, treeChild.getId()));
		}
		
		if (map != null)
			childList.add(map);
	}
	return childList;
}

   

    jsp page

<div id= "treeGrid" style="width:285px;"></div>

  

    js code

$(function(){
	$ ('# treeGrid'). treegrid ({    
		url:'role!backTreeGridTreeRole.action',
		idField: 'id',
		treeField:'name',
		columns: [[
			{title: '角色id', field: 'id', width: 280, hidden:true},
			{title: 'Character name', field: 'name', width: 280}
		]]
	})
});