文章目录

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的格式分为两种

  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

在这里插入图片描述

<%-- 测试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(){

        /*
        页面数据
        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
在这里插入图片描述
修改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标签显示树状结构 -->
    <ul id="treeDemo" class="ztree"></ul>
</body>
</html>

效果
在这里插入图片描述

# java # json
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 4 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区