【SaaS - Export项目】15 - zTree树形菜单入门使用（json格式）

逃离我推掉我的手 2022-12-19 06:03 126阅读 0赞

### 文章目录 ###

*   *  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][https_gitee.com_zTree_zTree_v3]**  
在线文档学习：**[http://www.treejs.cn/v3][http_www.treejs.cn_v3]**

Ztree的功能特色

> 优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。  
> • 兼容 IE、FireFox、Chrome 等浏览器  
> • 在一个页面内可同时生成多个 Tree 实例  
> • 支持 JSON 数据  
> • 支持一次性静态生成 和 Ajax 异步加载两种方式  
> • 支持多种事件响应及反馈  
> • 支持 Tree 的节点移动、编辑、删除  
> • 支持任意更换皮肤 / 个性化图标（依靠css）  
> • 支持极其灵活的 checkbox 或 radio 选择功能  
> • 简单的参数配置实现 灵活多变的功能

![在这里插入图片描述][20201105192849175.png_pic_center]

## zTree树形组件入门使用 ##

> 步骤：  
> 第一步：拷贝zTree的css/js文件到项目中  
> 第二步：拷贝js导入到当前页面  
> 第三步：页面定义显示树的区域

### 1. 将下载好的zTree文件的css、js文件拷贝到项目的web模块中去。 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]

### 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}
            ];

效果是这样的  
![在这里插入图片描述][20201106230057852.png_pic_center]

### 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**的格式分为两种
> 
> > 1.  **利用Json格式嵌套体现父子关系和Array简单格式。**
> > 
> >     var zNodes = [    
> >     		{ "id":1, "name":"SasS管理", "nodes":[    
> >     		   { "id":11, "name":"企业管理", "nodes":[    
> >     			 { "id":111, "name":"模块管理"}    
> >     		   ]},    
> >     		  { "id":12, "name":"系统管理"}    
> >     		]},    
> >     	
> >     	];
> > 
> > 1.  **带有父子关系的标准 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 ###

![在这里插入图片描述][20201106231715562.png_pic_center]

<%-- 测试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 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(){ 
    
            /* 页面数据 var zNodes =[ { id:1, pId:0, name:"Sass管理", open:true}, { id:2, pId:1, name:"企业管理", open:true,checked:true}, { id:3, pId:1, name:"模块管理"}, { id:4, pId:1, name:"用户管理"}, { id:5, pId:1, name:"角色管理"} ]; */
    
            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`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 1]  
修改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(){ 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 id="treeDemo" class="ztree"></ul>
    </body>
    </html>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 2]

[https_gitee.com_zTree_zTree_v3]: https://gitee.com/zTree/zTree_v3
[http_www.treejs.cn_v3]: http://www.treejs.cn/v3
[20201105192849175.png_pic_center]: /images/20221120/b272dbc4c3ef4638bffbd987c6be5911.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201105194312671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0,size_16,color_FFFFFF,t_70#pic_center
[20201106230057852.png_pic_center]: https://img-blog.csdnimg.cn/20201106230057852.png#pic_center
[20201106231715562.png_pic_center]: https://img-blog.csdnimg.cn/20201106231715562.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201106232121494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201106232326971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0,size_16,color_FFFFFF,t_70#pic_center