树形表格插件jQuery TreeGrid

借助树形表格插件jQuery TreeGrid,我们可以以表格的形式来展现那些带有层级关系的数据,比如部门上下级,菜单表等。jQuery TreeGrid的官方地址为:http://maxazan.github.io/jquery-treegrid/。由于这里的使用环境为bootstrap,原始的jQuery TreeGrid插件显得不是那么的灵活和美观,为了在bootstrap中无缝的使用该插件,这里引用了经过二次封装的jQuery TreeGrid插件jquery.treegrid.extension.js,作者为:http://www.cnblogs.com/landeanfen/p/6776152.html

引入依赖

首先先引入bootstrap相关的依赖:

1
2
3
4
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

然后引入jQuery TreeGrid依赖以及jquery.treegrid.extension.js :

1
2
3
4
5
<!-- jquery.treegrid -->
<link rel="stylesheet" data-th-href="@{css/jqTreeGrid/jquery.treegrid.css}">
<script data-th-src="@{js/jqTreeGrid/jquery.treegrid.js}"></script>
<!-- jquery.treegrid.extension -->
<script data-th-src="@{js/jqTreeGrid/jquery.treegrid.extension.js}"></script>

因为bootstrap没有自带图标组件,为了下文的使用,这里引入font-awesome:

1
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

数据

使用的数据表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
-- ----------------------------
-- Table structure for T_DEPT
-- ----------------------------
DROP TABLE "MRBIRD"."T_DEPT";
CREATE TABLE "MRBIRD"."T_DEPT" (
"DEPT_ID" NUMBER NOT NULL ,
"PARENT_ID" NUMBER NOT NULL ,
"DEPT_NAME" VARCHAR2(100 BYTE) NOT NULL ,
"ORDER_NUM" NUMBER NULL ,
"CREATE_TIME" DATE NULL
);

-- ----------------------------
-- Records of T_DEPT
-- ----------------------------
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('7', '2', '开发一部福州分部', null, TO_DATE('2018-03-15 09:32:15', 'YYYY-MM-DD HH24:MI:SS'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('1', '0', '开发部', null, TO_DATE('2018-01-04 15:42:26', 'YYYY-MM-DD HH24:MI:SS'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('3', '1', '开发二部', null, TO_DATE('2018-01-04 15:42:29', 'YYYY-MM-DD HH24:MI:SS'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('5', '0', '人事部', null, TO_DATE('2018-01-04 15:42:32', 'YYYY-MM-DD HH24:MI:SS'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('2', '1', '开发一部', null, TO_DATE('2018-01-04 15:42:34', 'YYYY-MM-DD HH24:MI:SS'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('4', '0', '市场部', null, TO_DATE('2018-01-04 15:42:36', 'YYYY-MM-DD HH24:MI:SS'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('6', '0', '测试部', null, TO_DATE('2018-01-04 15:42:38', 'YYYY-MM-DD HH24:MI:SS'));

后端框架为Spring Boot + MyBatis(通用mapper和pagehelper插件),获取数据的具体细节这里不再描述,可参考文末的源码。

使用

编写一个简单的页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form class="form">
<div class="row">
<div class="col">
<div class="input-group">
<span class="input-group-addon">部门名称:</span>
<div class="form-group">
<input type="text" name="deptName" class="form-control">
</div>
</div>
</div>
<div class="col">
<button type="button" class="btn btn-success" onclick="refresh()">重置</button>
<button type="button" class="btn btn-primary" onclick="search()">搜索</button>
</div>
</div>
</form>
<table id="deptTreeTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>

jQuery TreeGrid插件的使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var ctx = [[@{/}]];

$(function() {
initDeptTreeTable();
});

function initDeptTreeTable() {
$('#deptTreeTable').bootstrapTreeTable({
id: 'deptId', // 选取记录返回的值
code: 'deptId', // 用于设置父子关系
parentCode: 'parentId', // 用于设置父子关系
rootCodeValue: null, //设置根节点code值----可指定根节点,默认为null,"",0,"0"
data: [], // 构造table的数据集合,如果是ajax请求则不必填写
type: "GET", // 请求数据的ajax类型
url: ctx + 'dept/list', // 请求数据的ajax的url
ajaxParams: {
deptName: $(".form").find("input[name='deptName']").val().trim()
}, // 请求数据的ajax的data属性
expandColumn: 2, // 在哪一列上面显示展开按钮
expandAll: true, // 是否全部展开
striped: true, // 是否各行渐变色
columns: [{
field: 'selectItem',
checkbox: true
},
{
title: '编号',
field: 'deptId',
width: '50px'
},
{
title: '名称',
field: 'deptName'
},
{
title: '创建时间',
field: 'createTime'
}
], // 设置列
toolbar: null, //顶部工具条
height: 0,
expanderExpandedClass: 'fa fa-chevron-down', // 展开的按钮的图标
expanderCollapsedClass: 'fa fa-chevron-up' // 缩起的按钮的图标
});
}
// 搜索方法
function search() {
initDeptTreeTable();
}
// 重置方法
function refresh() {
$(".form")[0].reset();
search();
}

参数说明如注解所示,其中expanderExpandedClass和expanderCollapsedClass为展开和缩起的图标,这里使用的是文章开始引入的font-awesome。

后端返回的JSON数据如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
[{
"deptId": 1,
"parentId": 0,
"deptName": "开发部",
"orderNum": null,
"createTime": 1515051746000
}, {
"deptId": 2,
"parentId": 1,
"deptName": "开发一部",
"orderNum": null,
"createTime": 1515051754000
}, {
"deptId": 3,
"parentId": 1,
"deptName": "开发二部",
"orderNum": null,
"createTime": 1515051749000
}, {
"deptId": 4,
"parentId": 0,
"deptName": "市场部",
"orderNum": null,
"createTime": 1515051756000
}, {
"deptId": 5,
"parentId": 0,
"deptName": "人事部",
"orderNum": null,
"createTime": 1515051752000
}, {
"deptId": 6,
"parentId": 0,
"deptName": "测试部",
"orderNum": null,
"createTime": 1515051758000
}, {
"deptId": 7,
"parentId": 2,
"deptName": "开发一部福州分部",
"orderNum": null,
"createTime": 1521077535000
}]

页面显示效果如下: QQ截图20180315103450.png

其实,在实际使用中我们并不需要配置那么多参数,查看jquery.treegrid.extension.js源码可发现,其默认参数为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.fn.bootstrapTreeTable.defaults = {
id: 'menuId',
code: 'menuId',
parentCode: 'parentId',
rootCodeValue: null,
data: [],
type: "GET",
url: null,
ajaxParams: {},
expandColumn: null,
expandAll: true,
striped: false,
columns: [],
toolbar: null,
height: 0,
expanderExpandedClass: 'fa fa-chevron-down',
expanderCollapsedClass: 'fa fa-chevron-up'

};

所以使用的时候只需配置几个我们关注的参数即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$('#deptTreeTable').bootstrapTreeTable({
id: 'deptId',
code: 'deptId',
parentCode: 'parentId',
url: ctx + 'dept/list',
ajaxParams: {
deptName: $(".form").find("input[name='deptName']").val().trim()
},
expandColumn: 2,
striped: true,
columns: [{
field: 'selectItem',
checkbox: true
},
{
title: '编号',
field: 'deptId',
width: '50px'
},
{
title: '名称',
field: 'deptName'
},
{
title: '创建时间',
field: 'createTime'
}
]
});

jquery.treegrid.extension.js还封装了一些方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.fn.bootstrapTreeTable.methods = {
// 返回选中记录的id(返回的id由配置中的id属性指定)
// 为了兼容bootstrap-table的写法,统一返回数组,这里只返回了指定的id
getSelections: function(target, data) {
// 所有被选中的记录input
var _ipt = target.find("tbody").find("tr").find("input[name='select_item']:checked");
var chk_value = [];
// 如果是radio
if (_ipt.attr("type") == "radio") {
chk_value.push({ id: _ipt.val() });
} else {
_ipt.each(function(_i, _item) {
chk_value.push({ id: $(_item).val() });
});
}
return chk_value;
},
// 刷新记录
refresh: function(target, parms) {
if (parms) {
target.load(parms);
} else {
target.load();
}
},
// 重置表格视图
resetHeight: function(target, height) {
target.find("tbody").css("height", height + 'px');
}
// 组件的其他方法也可以进行类似封装........
};

比如获取选中行的数据可使用getSelections:

1
$("#deptTreeTable").bootstrapTreeTable("getSelections");

附录

源码链接:https://drive.google.com/open?id=1fgYRpD5CNCn4gj06_MiLm-g2fCjsSYtk


TOP