发表更新前端技术 / zTree5 分钟读完 (大约763个字)

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

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

关注我
×