easyui treegrid实现的两种方式

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

两种方式前台都一样:

$('#tree').treegrid({
    url:"",
	idField:'code',
    rownumbers:true,
	treeField:'name',
	columns:[[
	    {title:'name',field:'name',width:180},
		{title:'code',field:'code',width:180},
		]]
});

一、关键词 :_parentId

在返回的对象数据中将父code的属性名设置成_parentId,返回easyui分页数据{"page":,"rows":[{}]}后treegrid在前台会对数据进行重新装配

二、关键词: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("page", list.size());
		datagrid.put("rows", list);

返回数据结构如下:

{
	"page": 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": ""
	}]
}

 

上一篇:Node.js Nginx – 现在怎么办?


下一篇:Part 03 : Numpy, Pandas, Matplotlib