zTree 基于 jQuery 多功能树结构插件

发布于 2020-09-29 20:34:28 字数 6084 浏览 1510 评论 0

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。

特点

zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现灵活多变的功能

zTree v3.x 入门指南

考虑到还是会有第一次使用 zTree 的朋友，因此入门指南不能少，至少让大家快速明白如何开始制作一棵属于自己的树。

步骤 1、文件准备

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

步骤 2、编写 html 页面

按照以下代码，制作 html 页面，访问试试看吧，注意：
1) "<!DOCTYPE html>" 是必需的！
2) zTree 的容器 className 别忘了设置为 "ztree"
3) 入门成功后，就可以按照顺序去看 Demo 了，直接看看源码，应该能看懂的

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {};
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

zTree v3.x 使用注意事项

目前的常见问题是通过原先 v2.6 的常见问题整理、提取过来的，还不够全面，在今后会逐步完善常见问题里面的内容。

1、js 核心文件

zTree v3.x 有 3 个 js 文件，一个核心包 ( jquery.ztree.core-3.x.js )，两个扩展包 -- 复选框功能包 ( jquery.ztree.excheck-3.x.js ) & 编辑功能包 ( jquery.ztree.exedit-3.x.js )

使用 zTree v3.x 时，核心包必须加载，扩展包根据需要进行加载；这种结构有利于今后不断开发 zTree 的各种辅助功能或工具，而不影响基本功能。

在实际使用中，建议将使用的扩展包与核心包代码合并为一个 js 文件，以节省网络资源，合并时一定要将核心包的代码放在最前面.

2、css 文件

zTree v3.x 只使用一个 zTreeStyle.css 文件，为了尽量避免样式冲突，将 zTree 容器的 className 设置为 'ztree'

v3.x 中对于主要 DOM ( li、ul、+/-图标、a ) 的 className 增加了 level 输出，可以针对不同等级的节点设定独立的样式

3、img 图片

zTree v3.x 将主要图标都合并为一个图片，利用图片切割方式显示图标

为了避免原先节点连线之间 1 像素间隔的问题，在 v3.x 中 +/-图标继续保留 18*18 的尺寸，其余图标全部修改为 16*16，请升级的朋友务必注意修正原先使用的图标大小

在 v3.x Demo 中自定义图标都是独立的图片文件，实际开发中建议也都采用图片切割的方式

4、zTree 数据

zTree 使用 JSON 数据，关于数据部分请认真查看 API 文档 "treeNode 节点数据详解" 中的内容，并且在 Demo 中也都可以看到 treeNode 的定义

5、调试代码

进行程序开发时，建议首先使用 chrome 或 firefox 进行调试工作 -- 普通 js 调试，ajax 获取数据时网络情况的跟踪都很容易。个人推荐：chrome 的开发人员工具或 firefox 的 firebug 插件。

zTree 对 jQuery 的版本有要求吗?

基本来说没有要求，zTree 在开发中使用 jQuery 1.4.4；目前简单测试过 jQuery 1.3+ 应该都能正常使用。

如果希望有更好的动画效果，更高的运行效率，可以选择较高版本的 jQuery；如果希望能有减少 js 代码，使用基本功能，那么可以选择 mini 版较低版本的jQuery，大家就各取所需吧。

zTree 中提供的是未经压缩的 jQuery 1.4.4，主要是开发时便于调试。

如需自行下载 jQuery，请访问：http://docs.jquery.com/Downloading_jQuery

css 样式异常怎么办?

产生样式冲突的可能性很多，在这次 v3.0 的制作过程中，又更加深入了这方面的了解，大概总结如下：

异常原因

页面上自定义的 css 与 zTree 的 css 产生冲突
页面上使用其他插件的 css 与 zTree 的 css 产生冲突
修改 zTree 的 css 错误影响了 zTree

解决方案

由于 css 冲突的可能性太多，与其说是解决方案，不如说是处理建议。

A、避免针对 id 进行样式设定，尽量采用 class 设置。因为针对 id 设定的样式等级太高，zTree 的样式肯定会被覆盖。
B、zTree 默认的样式不可能将全部 css 定义都重新设置一遍，所以难免有遗漏，如果被遗漏的样式影响了效果，那么请在 zTreeStyle 内增加上对应的设置内容，而且一旦出现这种情况，也希望你能通知我，谢谢。
C、如果以上都不能解决，那么再看看是否有命名规则冲突，导致了样式冲突
D、最后再看看是否自己修改的 zTree 样式出现了错误

请区分 JSON 字符串 / 对象

有不少朋友由于没有分清楚这两者的关系，导致使用 zTree 出现了错误，这里专门讲解一下：

（1）JSON 对象是满足 JSON 数据格式的 JS 对象
例如： {name:"abc"}
最正规的 JSON 数据是连属性名称都要被包括起来的
例如： {"name":"abc"}

（2）JSON 格式的字符串的关键问题-- 它仅仅是一个字符串，只不过满足了 JSON 的数据格式
例如：'{"name":"abc"}'

看到两个例子的对比了吗？显而易见，关键问题就出在外面这两个单引号上。

所以在生成 zTree 的数据时，请不要在数据外面再增加那两个单引号了！

参考： http://www.json.org/json-zh.html

如何将节点数据提交给 Server 端

你可以利用 Form 或 Ajax 提交数据，把 JSON 数据转化为参数是比较麻烦的。在今后，我会逐渐提供一些工具包便于大家生成各种格式的数据。

制作提交数据的基本方法：拼字符串，拼接成什么格式的字符串？是 url? xml? 还是 json？这就要根据后台解析数据的方法来决定了。

关于异步加载

1、什么是异步加载？

这个问题与 zTree 无关，但必须要解释一下，因为很多初学者都在这个问题上犯糊涂。

准确的说应该是：“什么是 AJAX ?”-- AJAX 即“Asynchronous JavaScript and XML”（异步JavaScript和XML)；AJAX 是一种技术，可以在不影响当前页面的情况下与后台服务端进行通讯，获取相应的数据。更多的解释大家可以去网上搜索一下。

2、异步加载的特性

请注意最前面的两个字 “异步”，与他类似还有一个词 “同步”，顾名思义“同步”就是前面的语句不执行完就不会执行后面的语句，“异步”就不一样了，发起异步请求后，不管是否得到结果，都不影响当前代码的后续执行。

经常有朋友问：“异步加载模式下，初始化 zTree 以后为什么无法得到全部节点数据？”、“异步加载模式下，初始化 zTree 以后为什么无法使用 expandAll 方法将全部节点展开？”等等类似的问题，看了前面的解释，应该明白了吧？当你发起异步请求后，代码会立刻去执行 getNodes 方法或 expandAll 方法，这时候异步加载的数据还未收到，当然操作就失效了。所以你会发现当你先 alert 一下，会发现又一切正常了-- 就是这个原因。

所以，对于异步加载模式下，需要在获取节点后处理的事情，尽量利用 onAsyncSuccess / onAsyncError 事件回调函数去处理，这样才能保证异步加载正常完毕后执行你需要的操作。

利用 setTimeout 举个异步的例子，对照着执行看看吧：
//No.1
var a = 1;
a++;
var b = a;
alert(b);

//No.2
var a = 1;
setTimeout(function(){a++;}, 500);
var b = a;
alert(b);