1. IT分享知识网首页

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]

老牧童 • • 未分类 • 阅读 181

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]目录标准数据格式简单数据格式setting.data.simpleData说明标准数据格式可以参考《JQuery-Ztree下载-入门》 《JQuery-Ztree下载-入门》中用的就是如下的标准数据格式 这种格式采用Json数组形式，然后其每个元素又可以嵌套Json数组，语义上虽然更加清晰，但实际上却不符合后台的面向对象 所以在实际开发中更适合用文件(josn,x…

大家好，欢迎来到IT知识分享网。

目录

zTree 树插件概述 与 下载

Ztree 树插件快速入门

zTree 标准数据格式

zTree 简单数据格式

setting.data.simpleData 说明

目录节点默认打开

单击名称展开/折叠节点

zTree 树插件概述 与 下载

1、zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点

2、zTree 是开源免费的软件, 使用 MIT 许可证

3、zTree v3.x 将核心代码按照功能进行了分割，不需要的代码可以不用加载)

4、采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

5、兼容 IE、FireFox?、Chrome、Opera、Safari 等浏览器

6、支持 JSON 数据，支持静态 和 Ajax 异步加载节点数据

7、支持任意更换皮肤 / 自定义图标

8、支持极其灵活的 checkbox 或 radio 选择功能

9、灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟

10、在一个页面内可同时生成多个 Tree 实例

官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

官网下载地址：http://www.treejs.cn/v3/main.php#_zTreeInfo，下载之前需要先登陆 gitee 账户，没有的需要先注册一下。

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]

api：api 文档
css：css 样式文件
demo：演示例子，其中 en 子目录下英文、cs 子目录下中文.
js：js 文件

12、demo 目录中的官方示例是学习的最佳文档，其中有详细的说明以及源码。

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]

Ztree 树插件快速入门

1、zTree v3.x 入门指南：http://www.treejs.cn/v3/faq.php#_206

2、将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确。

3、虽然 demo 目录下的示例 html 文件中只导入了几个 css、js 文件，但是其它它们内部是有依赖的，所以开发时直接将下载好的 css、js 文件全部导入到项目中即可，然后在 html 中引入相应的文件即可。

4、下面是在 Java web 中使用 zTree 树插件，在静态资源目录下导入了 zTree 的全部 css 文件以及全部 js 文件，然后再 html 中引用。

https://github.com/wangmaoxiong/thymeleafapp/tree/master/src/main/resources/static/css/zTree

https://github.com/wangmaoxiong/thymeleafapp/tree/master/src/main/resources/static/js/zTree

https://github.com/wangmaoxiong/thymeleafapp/blob/master/src/main/resources/templates/examples/zTree.html

5、实际中根据自己的实际情况在 html 文件引用 js 与 css，因为本项目是使用 Thymeleaf 所以，所以写法是 Thymeleaf 写法。

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]

zTree 标准数据格式

1、标准 JSON 数据：采用 Json 数组的形式，然后其每个数组元素又可以嵌套 Json 数组，语义上虽然更加清晰，但实际上却不符合后台的面向对象编程。

2、上面的快速入门也是使用的标准数据格式，只是数据是写死的，这里提供一个 Java Web 的后台接口，用于将服务器指定目录下的所有文件生成符合 zTree 的标准数据格式。

import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import java.io.File;
import java.util.logging.Logger;
/**
 * @author wangmaoxiong
 * @version 1.0
 * @date 2020/5/13 9:40
 */
public class FileWmxUtils {
    private static Logger logger = Logger.getAnonymousLogger();
    /**
     * 1、生成指定目录下的所有文件与目录的树级 json 字符串.
     * 2、格式：[{"name":"父节点1-wmx - 展开","open":true,"children":[{"name":"父节点11 - 折叠","children":[{"name":"叶子节点111"},{"name":"叶子节点112"}]},{"name":"父节点12 - 折叠","children":[{"name":"叶子节点121"},{"name":"叶子节点122"}]},{"name":"父节点13 - 没有子节点","isParent":true}]},{"name":"父节点2 - 折叠","children":[{"name":"父节点21 - 展开","open":true,"children":[{"name":"叶子节点211"},{"name":"叶子节点212"},{"name":"叶子节点213"},{"name":"叶子节点214"}]}]
     *
     * @param rootFile ：待生成的树的目录.
     * @param count    ：默认打开的多少个目录
     * @return : 返回约定格式的 json 数组，即一个目录下有哪些子文件或子文件夹.
     */
    public static JsonArray fileTreeByDirPath(File rootFile, int count) {
        JsonArray jsonArray = new JsonArray();
        File[] fileArr = rootFile.listFiles();

        if (!rootFile.exists() || !rootFile.isDirectory()) {
            logger.warning(rootFile + " 目录不存在...");
            return jsonArray;
        }
        for (File file : fileArr) {
            if (file.isFile()) {
                /**如果当前是文件*/
                JsonObject jsonObject = new JsonObject();
                jsonObject.addProperty("name", file.getName());
                jsonArray.add(jsonObject);
            } else {
                /**如果当前是目录*/
                JsonObject jsonObject = new JsonObject();
                jsonObject.addProperty("name", file.getName());
                if (count > 0) {
                    jsonObject.addProperty("open", true);
                }
                JsonArray childrenJsonArray = fileTreeByDirPath(file, --count);
                jsonObject.add("children", childrenJsonArray);
                jsonArray.add(jsonObject);
            }
        }
        return jsonArray;
    }
}

3、前端页面 zTree 插件使用 ajax 请求后台接口，返回指定格式的数据后进行显示：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>zTree 树插件 标准数据格式</title>
    <link rel="stylesheet" th:href="@{/css/zTree/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/js/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript">
        var setting = {};
        $(document).ready(function () {
            $.ajax({
                "url": "http://localhost:8080/example/getStandardData",
                "dataType": "json",
                "success": function (data) {
                    var zNodes = data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                },
                "error": function (data) {
                    console.log(data);
                }
            });
        });
    </script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]

源码：

src/main/java/com/wmx/thymeleafapp/controller/ExampleController.java

src/main/java/com/wmx/thymeleafapp/utils/FileWmxUtils.java

src/main/resources/templates/examples/standardData.html

zTree 简单数据格式

1、简单 JSON 数据 为纯 Json 数组，数组中 Json 不再嵌套，更适合面向对象的数据库保存。

2、如果 web 项目用的 Oracle 数据库，则可以使用 Oracle 中 start with 递归查询，返回的格式就是 zTree 的简单数据格式。

3、而如果是 Mysql 数据库，则没有 start with 语法，可以借助存储过程或者存储函数，也可以查询出来后在后台遍历然后再封装。

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单数据格式</title>
    <link rel="stylesheet" href="../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
    <script type="text/javascript">
        /**简单数据格式时，必须设置下面的 data.simpleData.enable 为 true
         * 标准数据格式时之所以没设值，因为它默认为 false */
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        /**简单数据格式*/
        var zNodes =[
            { id:1, pId:0, name:"父节点1 - 展开", open:true,url:"jyy"},
            { id:11, pId:1, name:"父节点11 - 折叠"},
            { id:111, pId:11, name:"叶子节点111"},
            { id:112, pId:11, name:"叶子节点112"},
            { id:113, pId:11, name:"叶子节点113"},
            { id:114, pId:11, name:"叶子节点114"},
            { id:12, pId:1, name:"父节点12 - 折叠"},
            { id:121, pId:12, name:"叶子节点121"},
            { id:122, pId:12, name:"叶子节点122"},
            { id:123, pId:12, name:"叶子节点123"},
            { id:124, pId:12, name:"叶子节点124"},
            { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
            { id:2, pId:0, name:"父节点2 - 折叠"},
            { id:21, pId:2, name:"父节点21 - 展开", open:true},
            { id:211, pId:21, name:"叶子节点211"},
            { id:212, pId:21, name:"叶子节点212"},
            { id:213, pId:21, name:"叶子节点213"},
            { id:214, pId:21, name:"叶子节点214"},
            { id:22, pId:2, name:"父节点22 - 折叠"},
            { id:221, pId:22, name:"叶子节点221"},
            { id:222, pId:22, name:"叶子节点222"},
            { id:223, pId:22, name:"叶子节点223"},
            { id:224, pId:22, name:"叶子节点224"},
            { id:23, pId:2, name:"父节点23 - 折叠"},
            { id:231, pId:23, name:"叶子节点231"},
            { id:232, pId:23, name:"叶子节点232"},
            { id:233, pId:23, name:"叶子节点233"},
            { id:234, pId:23, name:"叶子节点234"},
            { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
        ];
        $(document).ready(function(){
            /**为容器初始化数据*/
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>

setting.data.simpleData 说明

1、使用简单 Array 格式的数据，官网参考地址：http://www.treejs.cn/v3/api.php

setting.data.simpleData.enable

     确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)。不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式。

     true / false 分别表示 使用 / 不使用 简单数据模式，默认值 false。
setting.data.simpleData.idKey      节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]，默认值：”id”
setting.data.simpleData.pIdKey 节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]，默认值：”pId”
setting.data.simpleData.rootPId  用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]，默认值：null

目录节点默认打开

1、用于树加载完成后默认打开部分指定的目录，设置 open 参数为 true 即可实现：

标准数据格式：[{“name”:”3.2″,“open”:true,”children”:[{“name”:”asm-3.2.jar”},{“name”:”asm-3.2.jar …..

简单数据格式：{ id:21, pId:2, name:”父节点21 – 展开”, open:true}……

单击名称展开/折叠节点

1、zTree 默认只能通过左侧的 “+” 号来展开节点，”-” 号来折叠节点，不提供单击节点名称展开节点的功能，但可以利用 onClick 事件回调函数轻松实现此功能。

2、为了避免与双击功能冲突，建议关闭双击展开节点的功能，请设置 setting.view.dblClickExpand = false。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>zTree 树插件 标准数据格式</title>
    <link rel="stylesheet" th:href="@{/css/zTree/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/js/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript">
        var setting = {
            view: {
                //为了避免与双击功能冲突，建议关闭双击展开节点的功能
                dblClickExpand: false
            },
            callback: {
                //单击回调方法.
                onClick: onClick
            }
        };
        /**
         * zTree 单击回调方法
         * zTree 默认不提供单击节点名称展开节点的功能，但可以利用 onClick 事件回调函数轻松实现此功能
         * @param e
         * @param treeId
         * @param treeNode
         */
        function onClick(e, treeId, treeNode) {
            /**treeDemo 是 zTree 容器的 id 值，不要带 # 号*/
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.expandNode(treeNode);
        }
        $(document).ready(function () {
            $.ajax({
                "url": "http://localhost:8080/example/getStandardData",
                "dataType": "json",
                "success": function (data) {
                    var zNodes = data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                },
                "error": function (data) {
                    console.log(data);
                }
            });
        });
    </script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>

JQuery-Ztree 树插件下载 与 快速入门[通俗易懂]

 

 

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/24535.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信