文章目录
-
- zTree介绍
- zTree树形组件入门使用
-
- 1. 将下载好的zTree文件的css、js文件拷贝到项目的web模块中去。
- 2. 选择自己需要的类型的html进行修改
- 3. 主要参数介绍**setting、zTree **
- 4. 一个显示树形图的案例jsp
- 5. 从后台controller传输数据显示【***】
zTree介绍
zTree 是一个依靠的核心代码，实现一套能完成大部分常用功能的 Tree 插件（树插件）。
在使用的时候，先导入jquery才能导入zTree
专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等待
github地址：https://gitee.com/zTree/zTree_v3
在线文档学习：http://www.treejs.cn/v3
Ztree的功能特色
优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
• 兼容 IE、FireFox、Chrome 等浏览器
• 在一个页面内可同时生成多个 Tree 实例
• 支持 JSON 数据
• 支持一次性静态生成 和 Ajax 异步加载两种方式
• 支持多种事件响应及反馈
• 支持 Tree 的节点移动、编辑、删除
• 支持任意更换皮肤 / 个性化图标（依靠css）
• 支持极其灵活的 checkbox 或 radio 选择功能
• 简单的参数配置实现 灵活多变的功能
zTree树形组件入门使用
步骤：
第一步：拷贝zTree的css/js文件到项目中
第二步：拷贝js导入到当前页面
第三步：页面定义显示树的区域
1. 将下载好的zTree文件的css、js文件拷贝到项目的web模块中去。
2. 选择自己需要的类型的html进行修改
这里我用最简单的ztree.html进行修改
这个ztree.html它的数据格式是json
var zNodes =[
{ id:1, pId:0, name:"pNode 1", open:true},
{ id:11, pId:1, name:"pNode 11"},
{ id:111, pId:11, name:" sNode 111"},
{ id:112, pId:11, name:"sNode 112"},
{ id:113, pId:11, name:"sNode 113"},
{ id:114, pId:11, name:"sNode 114"},
{ id:12, pId:1, name:"pNode 12"},
{ id:121, pId:12, name:"sNode 121"},
{ id:122, pId:12, name:"sNode 122"},
{ id:123, pId:12, name:"sNode 123"},
{ id:124, pId:12, name:"sNode 124"},
{ id:13, pId:1, name:"pNode 13", isParent:true},
{ id:2, pId:0, name:"pNode 2"},
{ id:21, pId:2, name:"pNode 21", open:true},
{ id:211, pId:21, name:"sNode 211"},
{ id:212, pId:21, name:"sNode 212"},
{ id:213, pId:21, name:"sNode 213"},
{ id:214, pId:21, name:"sNode 214"},
{ id:22, pId:2, name:"pNode 22"},
{ id:221, pId:22, name:"sNode 221"},
{ id:222, pId:22, name:"sNode 222"},
{ id:223, pId:22, name:"sNode 223"},
{ id:224, pId:22, name:"sNode 224"},
{ id:23, pId:2, name:"pNode 23"},
{ id:231, pId:23, name:"sNode 231"},
{ id:232, pId:23, name:"sNode 232"},
{ id:233, pId:23, name:"sNode 233"},
{ id:234, pId:23, name:"sNode 234"},
{ id:3, pId:0, name:"pNode 3", isParent:true}
];
效果是这样的
3. 主要参数介绍**setting、zTree **
setting配置
<!-- 这里是一部分配置 -->
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true //每个节点上是否显示 CheckBox
};
zTreeNodes
zTreeNodes参数，是zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，可以理解为zTreeNodes就是使用Json格式保存了树的所有信息。
zTreeNodes的格式分为两种
- 利用Json格式嵌套体现父子关系和Array简单格式。
var zNodes = [ { "id":1, "name":"SasS管理", "nodes":[ { "id":11, "name":"企业管理", "nodes":[ { "id":111, "name":"模块管理"} ]}, { "id":12, "name":"系统管理"} ]}, ];
- 带有父子关系的标准 zTreeNodes【我比较喜欢使用这种方式】
var zNodes =[ { id:1, pId:0, name:"Sass管理", open:true}, { id:11, pId:1, name:"企业管理", open:true,checked:true}, { id:111, pId:1, name:"模块管理"}, { id:112, pId:1, name:"用户管理"}, { id:113, pId:1, name:"角色管理"} ];
4. 一个显示树形图的案例jsp
<%-- 测试zTree树形结构 --%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
<title>测试zTree</title>
<%--项目地址--%>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<%--步骤：
第一步：拷贝zTree的css/js文件到项目中
第二步：拷贝js导入到当前页面
第三步：页面定义显示树的区域
--%>
<%--拷贝zTree的js脚本、css样式导入到当前页面--%>
<link rel="stylesheet" type="text/css" href="${path}/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="${path}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript"> //当前的配置信息 var setting = { check: { enable: true }, data: { simpleData: { enable: true } } }; //zTree的数据（模拟数据） //pId是树形菜单的等级（0最高） open:true，就是菜单是打开的（显示子菜单） //checked:true 默认选中 var zNodes =[ { id:1, pId:0, name:"Sass管理", open:true}, { id:11, pId:1, name:"企业管理", open:true,checked:true}, { id:111, pId:1, name:"模块管理"}, { id:112, pId:1, name:"用户管理"}, { id:113, pId:1, name:"角色管理"} ]; $(document).ready(function(){ //参1 显示的标签 参2 设置的参数 比如支持复选 check enable = true 参3 数据 $.fn.zTree.init($("#treeDemo"), setting, data); }); </script>
</head>
<body>
<!-- ul标签显示树状结构 -->
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>
5. 从后台controller传输数据显示【***】
TestZtreeDataController
@Controller
@RequestMapping("/testZTree")
public class TestZtreeDataController{
//以json格式向zTree树形菜单放数据
@RequestMapping(path="/getZtreeData",method ={ RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public Object getZtreeData(){
List<Map<String,Object>> list=new ArrayList<>();
Map<String,Object> node1=new HashMap<String,Object>();
node1.put("id",1);
node1.put("pId",0); //菜单等级
node1.put("name","Sass管理");
node1.put("open",true); //是否展开该菜单
Map<String,Object> node2=new HashMap<String,Object>();
node2.put("id",11);
node2.put("pId",1);
node2.put("name","企业管理");
node2.put("open",true);
node2.put("checked",true); //设置选中状态
Map<String,Object> node3=new HashMap<String,Object>();
node3.put("id",111);
node3.put("pId",1);
node3.put("name","模块管理");
Map<String,Object> node4=new HashMap<String,Object>();
node4.put("id",112);
node4.put("pId",1);
node4.put("name","用户管理");
Map<String,Object> node5=new HashMap<String,Object>();
node5.put("id",113);
node5.put("pId",1);
node5.put("name","角色管理");
//因为五个元素放在[]中，所以本质上放到集合中的
list.add(node1);
list.add(node2);
list.add(node3);
list.add(node4);
list.add(node5);
return list; //list虽然是对象，但会被 @ResponseBody转成json
}
}
验证json数据
http://localhost:8080/SaaS-Export/testZTree/getZtreeData
修改jsp页面，让它从后台获取数据显示
<%-- 测试zTree树形结构 --%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
<title>测试zTree</title>
<%--项目地址--%>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<%--步骤：
第一步：拷贝zTree的css/js文件到项目中
第二步：拷贝js导入到当前页面
第三步：页面定义显示树的区域
--%>
<%--拷贝zTree的js脚本、css样式导入到当前页面--%>
<link rel="stylesheet" type="text/css" href="${path}/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="${path}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript"> //当前的配置信息 var setting = { check: { enable: true }, data: { simpleData: { enable: true } } }; //zTree的数据（模拟数据） //pId是树形菜单的等级（0最高） open:true，就是菜单是打开的（显示子菜单） //checked:true 默认选中 $(document).ready(function(){ var fn =function(data){ //菜单的初始化 //参1 显示的标签 参2 设置的参数 比如支持复选 check enable = true 参3 数据 $.fn.zTree.init($("#treeDemo"), setting, data); } //ajax获取数据 $.get('${path}/testZTree/getZtreeData',fn,'json') }); </script>
</head>
<body>
<!-- ul标签显示树状结构 -->
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>
效果
