感觉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": ""
}]
}