zTree加载树形节点(父子菜单,省市区)

后台管理系统经常要用到树形插件来展示具有父子关系的功能,如父子菜单,省市区关系等;还有通过树形插件节点的勾选来设置用户与菜单权限的关联,或某些功能与省市区的关联。

zTree在树形节点的展示上用的是比较多的,支持 JSON 数据,可灵活编辑(增/删/改/查)功能。

zTree官网:http://www.treejs.cn/v3/main.php#_zTreeInfo

前端页面使用树形插件来展示具有父子关系的数据,当对树形节点的属性(例如:勾选)进行设置时,还需要将修改后的属性返回给后端时行处理。
下面以后台管理系统左侧导航栏的导航菜单为例,导航菜单一般都会两级菜单,一级菜单与二级菜单具有父子关系。

树形菜单

实际开发中,后台通常返回给前端 JSON数据,此示例以 JSON数据文件为例。

菜单实体类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* @Name: SysMenu
* @Desc: 系统菜单
* @Date: 2018-06-28 16:33
**/
public class SysMenu implements Serializable {
private static final long serialVersionUID = -3254583720331660709L;

private Long id; //菜单ID
private String name; //菜单名称
private Long parentId; //父菜单ID
private String url; //菜单URL
private Integer state; //菜单状态
private String icon; //菜单图标

//...................

private Boolean checked; //菜单选中

//------set/get方法---------

}

菜单json数据

菜单json数据文件:menu.json

1
2
3
4
5
6
7
8
[{	"id": 15,	"name": "产品管理",	"parentId": 0,	"url": null,	"state": 1,	"icon": null,	"createTime": "2018-07-02 07:07:30",	"subSysMenuList": null,	"checked": null},
{ "id": 20, "name": "会员管理", "parentId": 0, "url": null, "state": 1, "icon": null, "createTime": "2018-07-02 07:07:30", "subSysMenuList": null, "checked": true},
{ "id": 40, "name": "系统管理", "parentId": 0, "url": null, "state": 1, "icon": null, "createTime": "2018-07-02 07:07:30", "subSysMenuList": null, "checked": true},
{ "id": 1501, "name": "产品列表", "parentId": 15, "url": "/Product/list", "state": 1, "icon": null, "createTime": "2018-07-02 07:07:46", "subSysMenuList": null, "checked": null},
{ "id": 2001, "name": "会员列表", "parentId": 20, "url": "/DydUserInfo/list", "state": 1, "icon": null, "createTime": "2018-07-02 07:08:10", "subSysMenuList": null, "checked": true},
{ "id": 2002, "name": "会员类别", "parentId": 20, "url": "/LevelUp/list", "state": 1, "icon": null, "createTime": "2018-07-02 07:08:33", "subSysMenuList": null, "checked": true},
{ "id": 4001, "name": "用户管理", "parentId": 40, "url": "/User/list", "state": 1, "icon": null, "createTime": "2018-07-03 01:14:00", "subSysMenuList": null, "checked": true},
{ "id": 4002, "name": "角色管理", "parentId": 40, "url": "/sysRole/list", "state": 1, "icon": null, "createTime": "2018-07-03 01:14:27", "subSysMenuList": null, "checked": true}]

页面展示

  1. 将 json 数据显示为树形菜单。
  2. 获取选中的节点返回给后台处理。
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
<!DOCTYPE html>
<HTML>

<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.min.js"></script>

<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function() {
load_menu_json();

});

//加载json数据
function load_menu_json() {
$.getJSON("json/menu.json", function(data) {
console.log(data);

var zNodes = new Array();

for(var i = 0; i < data.length; i++) {
var value = {
id: data[i].id,
code: data[i].id,
pId: data[i].parentId,
name: data[i].name,
checked: data[i].checked
};
zNodes.push(value)
}
//调用zTree
menu_zTree(zNodes);
});
};

function menu_zTree(zNodes) {
var zTreeObj;
// zTree 的参数配置
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {
"Y": "ps",
"N": "sp"
}
},
//启用简单数据结构
data: {
simpleData: {
enable: true
}
}
};
console.log(zNodes);
$.fn.zTree.init($("#treeDemo"), setting, zNodes);

//调用获取选中的节点, 必须在zTree初始化后
get_checked();
}

//获取选中节点值
function get_checked() {
//定义接收菜单ID的数组
var menuIds = new Array();
//获取zTree 对象
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//通过zTree 对象获取选中的节点,是个数组
var nodes = treeObj.getCheckedNodes(true);
//遍历节点,取出菜单ID
for (var i = 0; i < nodes.length; i++) {
//将id装入menuIds
menuIds.push(nodes[i].id);
}
console.log(menuIds);
}
</SCRIPT>
</HEAD>

<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>

</HTML>

zTree加载树形节点(父子菜单,省市区)

http://blog.gxitsky.com/2018/07/06/jQuery-js-ztree/

作者

光星

发布于

2018-07-06

更新于

2022-07-07

许可协议

评论