树形插件jsTree

jsTree是一款基于jQuery的树形控件,具有扩展性强,可编辑和可配置的特性,支持HTML,JSON和Ajax数据加载。jsTree官网地址:https://www.jstree.com/。这里主要介绍的是基于Ajax从数据库获取数据,然后生成树形菜单的用法。jsTree的皮肤可以自由定制,本文使用的是一款第三方jsTree皮肤。

引入依赖

因为其基于jQuery,所以引入jsTree依赖前得先引入jQuery:

1
2
3
4
<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<!-- jsTree -->
<script src="https://cdn.bootcss.com/jstree/3.3.5/jstree.min.js"></script>

由于第三方皮肤没有CDN地址,所以我们下载到本地后手动引入(可在文末得源码中获取):

1
<link rel="stylesheet" data-th-href="@{css/jsTree/style.min.css}">

皮肤预览: 32px.png

数据准备

本文用到的数据表:

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 ('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'));
INSERT INTO "MRBIRD"."T_DEPT" VALUES ('7', '2', '一部分部', null, TO_DATE('2018-03-16 10:46:31', 'YYYY-MM-DD HH24:MI:SS'));

后端框架为Spring Boot + Mybatis(通用mapper),由于本文的重点是jsTree的使用,所以获取数据的细节和数据格式的处理这里不做阐述,具体可参考文末的源码。最终通过Ajax获取到的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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
{
"code": 0,
"msg": {
"id": "0",
"icon": null,
"url": null,
"text": "根节点",
"state": {
"opened": true
},
"checked": true,
"attributes": null,
"children": [{
"id": "1",
"icon": null,
"url": null,
"text": "开发部",
"state": null,
"checked": false,
"attributes": null,
"children": [{
"id": "3",
"icon": null,
"url": null,
"text": "开发二部",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "2",
"icon": null,
"url": null,
"text": "开发一部",
"state": null,
"checked": false,
"attributes": null,
"children": [{
"id": "7",
"icon": null,
"url": null,
"text": "一部分部",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "2",
"hasParent": true,
"hasChildren": false
}],
"parentId": "1",
"hasParent": true,
"hasChildren": true
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}, {
"id": "5",
"icon": null,
"url": null,
"text": "人事部",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "0",
"hasParent": false,
"hasChildren": false
}, {
"id": "4",
"icon": null,
"url": null,
"text": "市场部",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "0",
"hasParent": false,
"hasChildren": false
}, {
"id": "6",
"icon": null,
"url": null,
"text": "测试部",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "0",
"hasParent": false,
"hasChildren": false
}],
"parentId": "",
"hasParent": false,
"hasChildren": true
}
}

基本使用方法

使用Ajax从后台获取到如上所示格式的JSON数据(也就是r.msg),然后使用jsTree生成树形控件:

HTML:

1
<div id="deptTree"></div>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script data-th-inline="javascript">
var ctx = [[@{/}]];
$(function() {
createDeptTree();
});

function createDeptTree() {
$.post(ctx + "dept/tree", {}, function(r) {
var data = r.msg;
$('#deptTree').jstree({
"core": {
'data': data.children
}
});
})
}
</script>

效果如下所示:

常用操作

上面介绍了最基本的jsTree使用方法,下面开始介绍一些常用的jsTree操作。

显示Checkbox

JavaScript代码如下所示:

1
2
3
4
5
6
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox" ]
});

显示效果如下:

此时,被选中的选项默认会有浅蓝色的背景,如果想要去除,只需将js代码改为:
1
2
3
4
5
6
7
8
9
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox" ],
"checkbox" : {
"keep_selected_style" : false
}
});
效果如下所示:

Wholerow插件

该插件可以给选中的项目或者hover的项目添加一个行级别的背景色,js代码如下所示:

1
2
3
4
5
6
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox", "wholerow" ]
});

效果如下所示:

添加该插件后,控件前的虚线没了,具体原因未知=。=

取消父子关联

默认情况下,选中父节点后,其下的所有子节点也会跟着被选中,取消父子节点关联只需添加"checkbox": {"three_state": false}即可:

1
2
3
4
5
6
7
8
9
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox" ],
"checkbox": {
"three_state": false // 取消选择父节点后选中所有子节点
},
});

效果如下所示:

设置单选

设置单选的前提是必须先取消父子关联,然后在core里添加:

1
2
3
4
5
6
7
8
9
10
$('#deptTree').jstree({
"core": {
'data': data.children,
'multiple': false // 取消多选
},
"plugins" : [ "checkbox" ],
"checkbox": {
"three_state": false // 取消选择父节点后选中所有子节点
},
});

效果如下所示:

全部展开

如果需要初始化控件的时候展开树,可调用jsTree的open_all()方法:

1
2
3
4
5
6
7
8
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox" ]
}).on("loaded.jstree", function (event, data) {
$('#deptTree').jstree().open_all();
});

或者设置state

1
2
3
4
5
6
7
8
9
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox", "state" ],
'state': {
"opened": true,
}
});

效果如下所示:

默认选中

jsTree可以在初始化后默认选中某些节点:

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox" ],
"checkbox": {
"three_state": false
},
}).on("loaded.jstree", function (event, data) {
$('#deptTree').jstree().open_all();
$('#deptTree').jstree('select_node', [5, 7], true);
console.log($('#deptTree').jstree(true).get_selected()); // ["5", "7"]
});

效果如下所示:

绑定选取监听

jsTree可以在选中和取消选中的时候绑定监听事件:

1
2
3
4
5
6
7
8
9
$('#deptTree').jstree({
"core": {
'data': data.children
},
"plugins" : [ "checkbox" ]
}).on("changed.jstree", function (e, data) {
console.log(data.changed.selected); // newly selected
console.log(data.changed.deselected); // newly deselected
});

效果如下所示:

附录

其他方法和属性可参考官方文档(官方文档写的比较抽象=。=):https://www.jstree.com/api/

源码链接:https://drive.google.com/open?id=17rdibWmH9CunPP9vs9sQrJPj5FefzoHj


TOP