zTree 基于 jQuery 多功能树结构插件 - 文章教程

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

发布于 2020-09-29 字数 8298 浏览 1151 评论 0

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

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

特点

  • 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);

相关链接

API 文档:http://www.treejs.cn/v3/api.php

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0