easyUI-树形表格(TreeGrid)实现无限层级菜单

     对于easyUI实现一个树形表格，是一件很简单的事情，实现形式很多。

     这里作者将实现，通过数据库获取数据，再将数据通过递归形式装成无限层级json数据，到达无限成级的树形表格结构。

 

     需要用到的json插件建附件，希望能对大家有所帮助

     效果如图
实现步逐          

     1、数据表设计(角色表)  

    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、实体

/**
 * 实体类 - 角色
 * 
 */
public class Role extends BaseEntity {

	private static final long serialVersionUID = -6614052029623997372L;
	private String name;					//角色名称
	private Boolean isSystem;				//是否为系统内置角色
	private String description;				//描述
	private List<Admin> adminList;			//管理员
	private List<Resource> resourceList;	//资源
	
	private String fatherId;				//父角色id-xiongmin
	private String fatherName;				//父角色名称-xiongmin
	
	private String children;				//子角色
	private String checked;					//节点是否被选中

	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、将角色封装成无限层级的json数据形式的关键代码，前端js调用方法

//存放转换后数据的集合  			
List<Map<String,Object>> treeGridList  =new ArrayList<Map<String,Object>>();
/**
 * 返回 treeGrid(树形表格)需要的json格式数据
 */
public String backTreeGridTreeRole(){
	//得到所有角色
	List<Role> list = roleService.getRoleAll();
	
	//调用方法实现角色树
	createTreeGridTree(list,"0");
	
	//将集合转换为json输出到页面
	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;
}


/**
 * 将角色封装成树开始
 * @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>();
			//这里无所谓怎么转都行，因为在页面easyUI插件treeGrid提供了数据转换的columns属性，具体看相关的js代码
			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);
	}
}


/**
 * 递归设置role树
 * @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>();
			//这里无所谓怎么转都行，因为在页面easyUI插件treeGrid提供了数据转换的columns属性，具体看相关的js代码
			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页面

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

  

    js代码

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

 
 

评论

1 楼 疏影横斜 2016-12-19  

新手是看不懂你实体类中的两个集合属性是哪里来的，代码并不全啊