后台管理系统经常要用到树形插件来展示具有父子关系的功能，如父子菜单，省市区关系等；还有通过树形插件节点的勾选来设置用户与菜单权限的关联，或某些功能与省市区的关联。
zTree在树形节点的展示上用的是比较多的，支持 JSON 数据，可灵活编辑(增/删/改/查)功能。
zTree官网：http://www.treejs.cn/v3/main.php#_zTreeInfo
前端页面使用树形插件来展示具有父子关系的数据，当对树形节点的属性(例如：勾选)进行设置时，还需要将修改后的属性返回给后端时行处理。
下面以后台管理系统左侧导航栏的导航菜单为例，导航菜单一般都会两级菜单，一级菜单与二级菜单具有父子关系。
树形菜单
实际开发中，后台通常返回给前端 JSON数据，此示例以 JSON数据文件为例。
菜单实体类
/**
* @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
[{ "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}]
页面展示
- 将 json 数据显示为树形菜单。
- 获取选中的节点返回给后台处理。
<!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>
更多内容请访问：IT源点
注意：本文归作者所有，未经作者允许，不得转载
