easyui treegrid实现的两种方式-CSDN博客

本文链接：https://blog.csdn.net/a316883923/article/details/95201749

感觉easyui官方的treegrid文档不是很清晰，当时使用的时候查了许多资料才做出来，现在总结一下两种实现方式的思路：

两种方式前台都一样：

$('#tree').treegrid({
    url:"",
    //idField指定的是对象的code（为唯一值）非父code
	idField:'code',
    rownumbers:true,
    //指定文件夹图标在哪一列
	treeField:'name',
	columns:[[
	    {title:'name',field:'name',width:180},
		{title:'code',field:'code',width:180},
		]]
});

一、关键词：_parentId

在返回的对象数据中将父code的属性名设置成_parentId，返回easyui分页数据{"total":,"rows":[{}]}（两种方法都必须按照该结构返回数据）后treegrid在前台会对数据进行重新装配，页面加载数据会有一个小的卡顿

不一定在实体中存在_parentId字段，可以在查询的时候起别名为_parentId，或者返回map<String,Object>（属性名：值）的键值对结果替换掉你实体中的父类code为_parentId》》new_map.put("_parentId", new_map.remove("parent_code"));

二、关键词：state、children[]

在后台将easyui分页数据直接封装成treegrid数据类型指定父节点的state为closed，并且把子节点放入children[]中（以一层子类为例，无限层则需要用到递归的方法进行封装）

Map<String, Object> datagrid = new HashMap<>();
		List<Map<String, Object>> list = systemDao.getInfoBySql(sql);
		for (int i = 0; i < list.size(); i++) {
			System.err.println("list--------------->"+JSON.toJSONString(list.get(i)));
			//根据当前对象的code是否是别的数据的父code判断是否含有子集
			String sql2 = "select * from ym_system where parent_code = '"+list.get(i).get("code")+"'";
			List<Map<String, Object>> list2 = systemDao.getInfoBySql(sql2);
			if(list2.size()>0) {
				list.get(i).put("state", "closed");
				list.get(i).put("children", list2);
			}
			
		}
datagrid.put("total", list.size());
		datagrid.put("rows", list);

返回数据结构如下：

{
	"total": 8,
	"rows": [{
		"code": "spxt",
		"sys_level_one": "",
		"design_concept": "",
		"children": [{
			"code": "spcjxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "视频采集系统",
			"parent_code": "spxt",
			"id": "402880346bac9f8a016baca24f9a000e",
			"describes": "",
			"design_reference": ""
		}, {
			"code": "spxsxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "视频显示系统",
			"parent_code": "spxt",
			"id": "402880346bac9f8a016baca29ede0010",
			"describes": "",
			"design_reference": ""
		}, {
			"code": "spcsyglxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "视频传输与管理系统",
			"parent_code": "spxt",
			"id": "402880346bac9f8a016baca301860012",
			"describes": "",
			"design_reference": ""
		}, {
			"code": "gqlbxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "高清录播系统",
			"parent_code": "spxt",
			"id": "402880346bac9f8a016baca346850014",
			"describes": "",
			"design_reference": ""
		}],
		"name": "视频系统",
		"id": "402880346bac9f8a016baca1e1be000c",
		"state": "closed",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "ypxt",
		"sys_level_one": "",
		"design_concept": "",
		"children": [{
			"code": "syxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "拾音系统",
			"parent_code": "ypxt",
			"id": "402880346bac9f8a016baca3b7d70018",
			"describes": "",
			"design_reference": ""
		}, {
			"code": "ypcsyglxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "音频传输与管理系统",
			"parent_code": "ypxt",
			"id": "402880346bac9f8a016baca3fff3001a",
			"describes": "",
			"design_reference": ""
		}, {
			"code": "ksxt",
			"sys_level_one": "",
			"design_concept": "",
			"name": "扩声系统",
			"parent_code": "ypxt",
			"id": "402880346bac9f8a016baca43157001c",
			"describes": "",
			"design_reference": ""
		}],
		"name": "音频系统",
		"id": "402880346bac9f8a016baca384560016",
		"state": "closed",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "jzkzxt",
		"sys_level_one": "",
		"design_concept": "",
		"name": "集中控制系统",
		"id": "402880346bac9f8a016baca48f8c001e",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "txywlxt",
		"sys_level_one": "",
		"design_concept": "",
		"name": "通信与网络系统",
		"id": "402880346bac9f8a016baca4cabc0020",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "pdxt",
		"sys_level_one": "",
		"design_concept": "",
		"name": "配电系统",
		"id": "402880346bac9f8a016baca52b830022",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "sbhjglxt",
		"sys_level_one": "",
		"design_concept": "",
		"name": "设备环境管理系统",
		"id": "402880346bac9f8a016baca568e30024",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "zhbxxt",
		"sys_level_one": "",
		"design_concept": "",
		"name": "综合布线系统",
		"id": "402880346bac9f8a016baca5a5a50026",
		"describes": "",
		"design_reference": ""
	}, {
		"code": "fzbgxt",
		"sys_level_one": "",
		"design_concept": "",
		"name": "辅助办公系统",
		"id": "402880346bac9f8a016baca5dfb20028",
		"describes": "",
		"design_reference": ""
	}]
}

附上递归装配子类的的思路代码（ssh版）

service：

@Override
	public Map<String, Object> getInfoBySql() {
		// TODO Auto-generated method stub
		String sql = "select * from ym_system where parent_code is null or parent_code = ''";
		
		//查询parent_code为空的对象--为父类
		List<Map<String, Object>> list = systemDao.getInfoBySql(sql);
		//根据父类的code递归装配子类信息
		List<Map<String, Object>> res = createTreeGridChildren(list);
		//easyui分页信息
		Map<String, Object> datagrid = new HashMap<>();
		datagrid.put("total", list.size());
		datagrid.put("rows", res);
		return datagrid;
	}

	/** 
	 * 递归设置树 
	 * @param list 
	 * @return 
	 */  
	private List<Map<String, Object>> createTreeGridChildren(List<Map<String, Object>> list) {  
		//保存对象信息的集合
	    List<Map<String, Object>> objectList = new ArrayList<Map<String, Object>>();  
	    
	    for (int i = 0; i < list.size(); i++) {
	    	String sql = "select * from ym_system where parent_code = '"+list.get(i).get("code")+"'";
			List<Map<String, Object>> list_child = systemDao.getInfoBySql(sql);
			//当对象的code是别的对象的parentCode时说明当前对象包含子类
			if(list_child.size()>0) {
				list.get(i).put("state", "closed");
				list.get(i).put("children", createTreeGridChildren(list_child));
			}
			objectList.add(list.get(i));
		}
	    
	    return objectList;  
	}

dao：

public List<Map<String, Object>> getInfoBySql(String sql) {
		// TODO Auto-generated method stub
		Session session = sessionFactory.getCurrentSession();
		List<Map<String, Object>> list = session.createSQLQuery(sql).
				//将结果集转换成属性名：属性值的键值对map
				setResultTransformer(CriteriaSpecification.ALIAS_TO_ENTITY_MAP).list();
		
		return list;
	}

entity：

package com.dfjd.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

import org.hibernate.annotations.GenericGenerator;


@Entity
@Table(name = "ym_system", schema = "")
@SuppressWarnings("serial")
public class SystemEntity implements java.io.Serializable {
	/**
	 * 主键
	 */
	private java.lang.String id;

	/**
	 * 系统编码
	 */
	private String code;

	/**
	 * 系统名称
	 */
	private String name;

	/**
	 * 父系统编码
	 */
	private String parent_code;

	/**
	 * 系统描述
	 */
	private String describes;

	/**
	 * 设计依据
	 */
	private String design_reference;

	/**
	 * 设计构思
	 */
	private String design_concept;

	private String sysLevelOne;

	/**
	 * 方法: 取得java.lang.String
	 *
	 * @return: java.lang.String 主键
	 */
	@Id
	@GeneratedValue(generator = "paymentableGenerator")
	@GenericGenerator(name = "paymentableGenerator", strategy = "uuid")

	@Column(name = "ID", nullable = false, length = 36)
	public java.lang.String getId() {
		return this.id;
	}

	/**
	 * 方法: 设置java.lang.String
	 *
	 * @param: java.lang.String 主键
	 */
	public void setId(java.lang.String id) {
		this.id = id;
	}

	@Column(name = "code", nullable = true, length = 32)
	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	@Column(name = "name", nullable = true, length = 32)
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Column(name = "describes", nullable = true, length = 500)
	public String getDescribes() {
		return describes;
	}

	public void setDescribes(String describes) {
		this.describes = describes;
	}

	@Column(name = "parent_code", nullable = true, length = 32)
	public String getParent_code() {
		return parent_code;
	}

	public void setParent_code(String parent_code) {
		this.parent_code = parent_code;
	}

	@Column(name = "sys_level_one", nullable = true, length = 32)
	public String getSysLevelOne() {
		return sysLevelOne;
	}

	public void setSysLevelOne(String sysLevelOne) {
		this.sysLevelOne = sysLevelOne;
	}

	@Column(name = "design_reference", nullable = true, length = 2000)
	public String getDesign_reference() {
		return design_reference;
	}

	public void setDesign_reference(String design_reference) {
		this.design_reference = design_reference;
	}

	@Column(name = "design_concept", nullable = true, length = 2000)
	public String getDesign_concept() {
		return design_concept;
	}

	public void setDesign_concept(String design_concept) {
		this.design_concept = design_concept;
	}

}