easyUI-树形菜单(ComboTree) 无限层级树实现方式

     对于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
	private String fatherName;				//父角色名称
	
	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>> comboTreeList  =new ArrayList<Map<String,Object>>();

/**
 * 返回 treeGrid(树形表格)需要的json格式数据
 * 前端调用的就是这个方法
 */
@SuppressWarnings("unchecked")
public String backComboTreeTreeRole(){
        //得到所有角色
	List<Role> list = roleService.getRoleAll();
	
	//调用方法实现角色树
	createComboTreeTree(list,"0");
	
	//将集合转换为json输出到页面
	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;
}


/**
 * 将角色封装成树开始
 * @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>();
			//这里必须要将对象角色的id、name转换成ComboTree在页面的显示形式id、text
			//ComboTree,不是数据表格，没有在页面通过columns转换数据的属性
			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);
	}
}


/**
 * 递归设置role树
 * @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>();
			//这里必须要将对象角色的id、name转换成ComboTree在页面的显示形式id、text
			//ComboTree,不是数据表格，没有在页面通过columns转换数据的属性
			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页面代码：

<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代码：

$(function(){
	//加载树
	$('#comboTree').combotree({      
        url:'role!backComboTreeTreeRole.action',
        onClick:function(node){
    		//单用户单击一个节点的时候，触发
        	$("input[name='role.fatherId']").val(node.id);
    	},
        checkbox:false,
        multiple:false
    });
});

 

 

 

 

评论

1 楼 bkhacker 2016-12-12