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 账户，没有的需要先注册一下。

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

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

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 写法。

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>

源码：

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 树插件下载与快速入门相关推荐

jQuery中文手册, jQuery API, jQuery UI, 分页插件下载
jQuery 库最新版下载 : jquery-1.3.2 最新版.rar 中文手册下载地址(超酷版): jQuery1.2API.rar API 文档下载(最新1.32CHM版): jQueryAPI ...
isp串口下载 stm32_快速入门STM32单片机
我觉得想要学好STM32单片机,思路非常重要,我们不应该考虑如何快速入门,我们应该考虑的是我们可以用STM32实现什么? 32单片机有着更高的频率,更多的IO管脚数,我们可以使用32单片机的SPI.I ...
在spring.io网下下载的快速入门项目，导进去pom.xml文件爆红，报：Non-resolvable parent POM for com.tc:demo:0.0.1-SNAPSHOT: F
博主直接第一次弄springBoot项目在https://start.spring.io网站下载好快速项目,导进eclipse,但是并非像视频老师那样完美导入,项目一开场见红,pom.xml文件报 ...
树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
jQuery 快速入门教程
内容目录 jQuery 入门什么是jQuery 如何使用jQuery jQuery的运行原理如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素使用jQue ...
TensorRt（2）快速入门介绍
文章目录 1.使用ONNX部署的示例 1.1.导出模型 1.2.设置batch size批处理大小 1.3.指定数值精度 1.4.转换模型 1.5.部署模型 2.使用ONNX转换为engine再部署的 ...
DB2快速入门的捷径pdf
下载地址:网盘下载 DB2 快速入门的捷径 DB2 Express C 9.7 3rd本书面向与那些从事数据库相关工作的读者,比如数据库管理员(dba).数据库相关的开发人员.咨询人员.软件架构设计 ...
二维码的生成（可设置大小）以及插件下载地址
本文写的二维码生成是基于jQuery和jquery.qrcode.min.js插件的,本文将介绍两种方法和方式,仅供朋友选择和取舍.本文最下面附有插件的下载地址! 方式1: 基于jquery.qrco ...
jquery.pagination 分页插件使用代码
jquery.pagination 分页插件下载链接 http://www.jq22.com/yanshi5697 js代码内容 var listLength = '' var pageNum = ...
页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...

JQuery-Ztree 树插件下载与快速入门

zTree 树插件概述与下载

Ztree 树插件快速入门

zTree 标准数据格式

zTree 简单数据格式

setting.data.simpleData 说明

目录节点默认打开

单击名称展开/折叠节点

JQuery-Ztree 树插件下载与快速入门相关推荐

最新文章

热门文章

JQuery-Ztree 树插件下载 与 快速入门

zTree 树插件概述 与 下载

Ztree 树插件快速入门

zTree 标准数据格式

zTree 简单数据格式

setting.data.simpleData 说明

目录节点默认打开

单击名称展开/折叠节点

JQuery-Ztree 树插件下载 与 快速入门相关推荐

最新文章

热门文章

JQuery-Ztree 树插件下载与快速入门

zTree 树插件概述与下载

JQuery-Ztree 树插件下载与快速入门相关推荐