树形表格的初始化
效果图
注意：我这里是随便模拟的数据，所以不用纠结数据不是一样的
第一点：了解数据库的数据结构
说明：在表中数据，主要的是id和父类id，每一个父类id为0的数据都是顶级父类，当某条数据id是其他数据的父类id时，称这个数据是其他数据的父类。
第二点：了解树形表格的所需要的数据类型
树形表格需要的数据类型可以分为两种，这里先说一种：以字段”_parentId“来区分父类与子类
{"total":9,"rows":[
{"id":1,"region":"Wyoming"},
{"id":11,"region":"Albin","_parentId":1},
{"id":12,"region":"Canon","_parentId":1},
{"id":13,"region":"Egbert","_parentId":1},
{"id":2,"region":"Washington"},
{"id":21,"region":"Bellingham","_parentId":2},
{"id":22,"region":"Chehalis","_parentId":2},
{"id":23,"region":"Ellensburg","_parentId":2},
{"id":24,"region":"Monroe","_parentId":2}
]}
这里可以小小的测试一下，实现树形表格：
controller控制层返回的数据可以拿上面试一下,如：
然后html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../api/jQueryEasyUI/jquery-easyui-1.3.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../api/jQueryEasyUI/jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../api/jQueryEasyUI/jquery-easyui-1.3.6/demo/demo.css">
<link rel="stylesheet" type="text/css" href="../../resource/css/economy-website/job.css">
<script type="text/javascript" src="../../resource/js/type/type.js"></script>
<script type="text/javascript" src="../../api/jQueryEasyUI/jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="../../api/jQueryEasyUI/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../resource/js/linkage/linkage.js"></script>
<script>
$(function () {
$('#tree').treegrid({
url:'/category/position/Test', // 这里是访问控制层的路径
idField:'id', // 定义关键字段来标识树节点。（必须的）
method:'GET',
treeField:'region', // 定义树节点字段。（必须的）
columns:[[
{field:'checkbox',checkbox:'true'},
{title:'编号',field:'id',width:200,align:'center'},
{title:'职位名称',field:'region',width:1044,editor:'text'},
{title:'职位排序',field:'sortNumber',width:200,align:'center',sortable: true}
]]
})
})
</script>
</head>
<body>
<!-- <table id="myTable" class="mini-treegrid" expandOnLoad="false"></table> -->
<!-- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true" id="btn_test">Add</a> -->
<table id="tree"></table>
</table>
</body>
</html>
效果如下：
当然在项目中可以拿自定义Result结果集来返回数据，Result结构如下：
public class Result {
private int code=0; // 数据是否加载成功
private String msg; // 数据加载后的消息
private int total; //数据总数
private Object obj; // 存放数据
private List rows; // 存放数据
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public Object getObj() {
return obj;
}
public void setObj(Object obj) {
this.obj = obj;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}
第二点：了解树形表格的所需要的数据类型
第二种树形表格返回的类型是根据"children"来进行区分父子类的
[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]
// 这个数据类型是对象数组来着，然后对象里面再有数组。
我这里直接上之前写过的一个获取这种数据类型的的例子吧，就不拿上面的这种了
// 编辑测试（个人测试）
@ResponseBody
@GetMapping("/Test")
private List Test(){
// categoryJobService是指向service层的引用
Result queryTop = categoryJobService.queryTop( ); // 获取所有的一级类别
List<CategoryPositionEntity> rows1 = queryTop.getRows(); // 传到Result结果集的rows字段中
List<TreeData> list = new ArrayList<TreeData>();
for (CategoryPositionEntity categoryPositionEntity : rows1) { // 这里是将一级类别循环放入TreeData实体类中，再存入list数组
TreeData treeData = new TreeData();
treeData.setId(categoryPositionEntity.getIdPosition());
treeData.setRegion(categoryPositionEntity.getPositionName());
treeData.setSortNumber(categoryPositionEntity.getPositionSort());
treeData.setState("closed"); // 这个是初始化默认不展示该节点的子节点
treeData.setIconCls("icon-add"); // 这个是修改树形表格默认的图标
list.add(treeData);
}
for (TreeData treeData : list) { // 循环一级类别的数组
List<TreeData> list1 = new ArrayList<TreeData>(); // 创建一个存二级类别的数组
// 这个是根据一级类别的id返回该一级类别下所有的二级类别数组
List<CategoryPositionEntity> rows2 = categoryJobService.queryTwo(treeData.getId()+"").getRows();
if(rows2.size() != 0) { // 判段出一级类别下是否存有二级类别
for (CategoryPositionEntity categoryPositionEntity : rows2) { // 循环二级类别数组并将每条数据存入指定实体类，然后在存入数组
TreeData treeData1 = new TreeData();
treeData1.setId(categoryPositionEntity.getIdPosition());
treeData1.setRegion(categoryPositionEntity.getPositionName());
treeData1.setSortNumber(categoryPositionEntity.getPositionSort());
treeData1.setState("closed"); // 这个是初始化默认不展示子节点，只展示父节点
list1.add(treeData1);
}
}else {
treeData.setState("");
}
treeData.setChildren(list1); // 将二级类别的数组存入到对应的一级类别中实体类的children字段中
if(treeData.getChildren().size()!=0) { // 下面不说了，和一级类别存入二级类别是一样的，不过就是二级存入三级
List<TreeData> children = treeData.getChildren();
for (TreeData treeData2 : children) {
List<CategoryPositionEntity> rows3 = categoryJobService.queryTwo(treeData2.getId()+"").getRows();
if(rows3.size() == 0) {
treeData2.setState("");
}
List<TreeData> list2 = new ArrayList<TreeData>();
for (CategoryPositionEntity categoryPositionEntity : rows3) {
TreeData treeData3 = new TreeData();
treeData3.setId(categoryPositionEntity.getIdPosition());
treeData3.setRegion(categoryPositionEntity.getPositionName());
treeData3.setSortNumber(categoryPositionEntity.getPositionSort());
list2.add(treeData3);
}
treeData2.setChildren(list2);
}
}
}
return list;
}
// 注意上面的代码看看就好了，不要复制
TreeData实体类
@Data
public class TreeData {
private int id;
private String region;
private int sortNumber;
private List children;
private String state;
private String iconCls;
}
然后是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../api/jQueryEasyUI/jquery-easyui-1.3.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../api/jQueryEasyUI/jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../api/jQueryEasyUI/jquery-easyui-1.3.6/demo/demo.css">
<link rel="stylesheet" type="text/css" href="../../resource/css/economy-website/job.css">
<script type="text/javascript" src="../../resource/js/type/type.js"></script>
<script type="text/javascript" src="../../api/jQueryEasyUI/jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="../../api/jQueryEasyUI/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../resource/js/linkage/linkage.js"></script>
<script>
$(function () {
$('#tree').treegrid({
url:'/category/position/Test',
idField:'id',
method:'GET',
treeField:'region',
columns:[[
{field:'checkbox',checkbox:'true'},
{title:'编号',field:'id',width:200,align:'center'},
{title:'职位名称',field:'region',width:1044,editor:'text'},
{title:'职位排序',field:'sortNumber',width:200,align:'center',sortable: true}
]]
})
$('#myTable').treegrid({
url:'/category/position/Test',
idField:'id',
treeField:'region',
method:'GET',
state:"closed",
pagination:true,
singleSelect:false,
sortName:'sortNumber',
sortOrder:'asc',
remoteSort:false,
columns:[[
{field:'checkbox',checkbox:'true'},
{title:'编号',field:'id',width:200,align:'center'},
{title:'职位名称',field:'region',width:1044,editor:'text'},
{title:'职位排序',field:'sortNumber',width:200,align:'center',sortable: true,editor:'text'}
]]
})
})
</script>
</head>
<body>
<table id="myTable" class="mini-treegrid" expandOnLoad="false"></table>
<!-- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true" id="btn_test">Add</a> -->
</table>
</body>
</html>