前端树形图 -- zTree -- jQuery 树插件的做法

火星的你 2015-07-10

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

zTree 是开源免费的软件（MIT 许可证）。所以完全免费，可以随便使用，没有任何版权问题。

zTree文档

zTree插件的优点：

  1. zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
  2. 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
  3. 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器（亲测，IE8+, FireFox, Chrome都可以正常使用）
  4. 支持 JSON 数据
  5. 支持静态 和 Ajax 异步加载节点数据（Ajax异步加载可以使插件的初始化速度更快，同时减少流量）
  6. 支持任意更换皮肤 / 自定义图标（依靠css）
  7. 支持极其灵活的 checkbox 或 radio 选择功能
  8. 提供多种事件响应回调 （可以让你的树更灵活）
  9. 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
  10. 在一个页面内可同时生成多个 Tree 实例
  11. 简单的参数配置实现 灵活多变的功能
同时，zTree的文档也已经很强大，而且应该是中国人开发的，所以提供中文文档，还提供了中文论坛的讨论区，包括百度贴吧也会有人常驻回答问题，这样就更近一步的让你对这个插件的使用更容易，获取资料更容易。
 
这里就讲一下zTree的最基本应用。
 
首先，zTree必须的就是数据，zTree可以接受两种数据，
一种是默认的数据类型：（这一种，所有的数据结构层级都显示在上面）
  1. zTreeNodes =[
  2. {"name":"网站导航", open:true, children:[
  3. {"name":"google","url":"http://g.cn","target":"_blank"},
  4. {"name":"baidu","url":"http://baidu.com","target":"_blank"},
  5. {"name":"sina","url":"http://www.sina.com.cn","target":"_blank"}
  6. ]
  7. }
  8. ];
 

还有一种是使用simpleData：（这里面主要根据id，isParent和pId来进行层级判断，我个人一直在使用这个形式，对于处理数据来说，这里对后台处理起来比较方便）

  1. [{"id":1357,"name":"山东省","isParent":true,"pId":0},
  2. {"id":1358,"name":"济南市","isParent":true,"pId":1357}]
 

其次，我们就需要添加对应的js和css库，jQuery也是必须的：

  1. <linkrel="stylesheet"type="text/css"href="http://cdn.gbtags.com/ztree/3.5/zTreeStyle.css">
  2. <scripttype="text/javascript"src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>
  3. <scripttype="text/javascript"src="http://cdn.gbtags.com/ztree/3.5/jquery.ztree.all-3.5.min.js"></script>
 

然后，一切就很简单，在HTML加入一个zTree的ul，class必须是zTree，必须有Id（用于以后获取zTree的对象）

  1. <ulclass="ztree"id="ztree"></ul>

 最后，我们需要在js中写显示的setting，然后用初始化方法，对tree进行初始化

  1. var checkSetting ={
  2. check:{
  3. enable:true,// 默认使用checkBox形式
  4. chkboxType:{"Y":"ps","N":"ps"}
  5. },
  6. data:{
  7. simpleData:{
  8. enable:true// 使用simpleData
  9. }
  10. },
  11. view:{
  12. nameIsHTML:true// 如果name中需要有html处理的话，那么把这个设为true。我一般开着，更灵活一点
  13. }
  14. };
  15. $.fn.zTree.init($("#ztree"), checkSetting, data);
 

 这样子一个tree就能显示出来啦。

更多完整内容参见：http://www.gbtags.com/gb/share/5716.htm

火星的你

火星的你

相关推荐

jQuery zTree插件使用

动态链接数据库：实现增删改查，和单个多个节点拖拽功能，使用Ajax和数据库动态更新。addHoverDom用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮removeHoverDom用于当鼠标移出节点时，隐藏用

83493467 / 0评论 2014-01-13

Jquery zTree演示程序Demo总结

前段时间一直没有时间总结，趁国庆还有这么点时间，总结一下。zTree树控件是基于Jquery的，官方提供了很好的API文档和Demo. <div style="z-index:12754; border: 1px solid lightgr

小源丶同学 / 0评论 2015-03-04

jQuery的ztree仿windows文件新建和拖拽功能的实现代码

优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。

83443560 / 0评论 2018-12-05

zTree组件的使用总结

第一次接触zTree，不得不说是一个好东西啊。说它是好东西是因为它为我们苦逼的程序员们节省了不少的时间。废话不多说上干货，希望能帮到你，如果需要更多的功能需要自己去看官方文档。-- <script type="text/javascript

xchrist / 0评论 2016-03-03

VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决

使用需求时隔两年多，再次使用到了 ztree ，这次是在vue中引入使用，并遇到了一些小问题，在这里把经验和解决办法给大家分享下，共勉。ztree： zTree -- jQuery 树插件 官网简介 zTree v3.5 Demo 演示有关ztree的使用

LingPF / 0评论 2019-06-30

Vue2.x 使用webpack设置工程的根目录

在工作中遇到如下问题，在src目录中的组件访问src外面的资源文件，如图所示

kaikai / 0评论 2017-09-21

ztree添加节点数据初始化事件

工作中用到分类选择树型下拉框，只允许单选叶子节点上的分类。如此需要使用把isParent=true的node的nocheck设置成true。在data.initNode后树节点数据已经初始化结束，接下便是创建树节点dom。所以可以afterInitNode

shanhuijava / 0评论 2015-12-11

Jquery zTree演示程序Demo总结

前段时间一直没有时间总结，趁国庆还有这么点时间，总结一下。zTree树控件是基于Jquery的，官方提供了很好的API文档和Demo

88463368 / 0评论 2015-03-04

jquery——zTree, 树插件

这绝对是我见过最完美的tree了，虽然是国产货，但一点不输国外产品，国外的还没有见过这么强的。

PHP基础学习 / 0评论 2014-12-29

ztree通过ajax获取json并勾选checkbook

应上级要求，项目的树列表要用ztree，那就服从命令吧。onClick:function { //用于捕捉勾选时触发。treeNode.checked,true);//勾选或取消勾选单个节点

Chydar / 0评论 2019-06-27

AngularJS 利用指令集成ZTree

前段时间一直在看AngularJS的资料，感觉是个很好的框架，很想有机会尝试用它做点什么。JQueryZTree是国内非常不错的JQuery插件，功能齐全，文档和API也非常的友好，之前项目上常用此插件。AngularJS 功能虽然非常强大，但UI上提供的

CrazyDogWang / 0评论 2014-08-20

JQuery Tree插件——zTree v3.5.16 版 发布

google code 已经无法上传下载包，请使用 Github 或 开源中国的 Git。* onDragMove 回调，便于控制 zTree 节点与其他 DOM 的拖拽操作。* 使用 destory 方法销毁树以后，依然可以从 getZTreeObj 方

罗惠东 / 0评论 2014-03-09

jQuery zTree插件使用

动态链接数据库：实现增删改查，和单个多个节点拖拽功能，使用Ajax和数据库动态更新。addHoverDom用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮removeHoverDom用于当鼠标移出节点时，隐藏用

asdjkl / 0评论 2014-01-13

fsLayuiPlugin树+数据表格使用

fsLayuiPlugin 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。特殊说明css和js需要在数据表格基础上多引入ztree的文件。<button cla

kbkiss / 0评论 2019-06-26

JQuery Tree插件——zTree v3.5.15 版 发布

* 使用 cancelEditName 方法时，beforeRename & onRename 的 isCancel 始终为 false 的bug. * 编辑状态， beforeRename 回调 return false 时，提示信息导致 i

愚盦 / 0评论 2013-10-21

zTree生成动态树

环境搭建：需要jquery 1.4+，jquery.ztree.core-3.1.min.js，ztree自带的css文件和图片，并且css文件和图片文件夹要处于同一目录(很重要)，否则动态树无法正常显示。

zgwyfz / 0评论 2013-09-14

JQuery Tree插件——zTree v3.5.14 版 发布

在 v3.5.13 中由于个人疏漏，产生了一个比较严重的bug，对此非常抱歉。请尽快升级到 最新版本。

momode / 0评论 2013-06-28

JQuery Tree插件——zTree v3.5.13 版 发布

近期由于工作繁忙，所以一直没有发布 v3.5.13 的正式版，只是在 github 上不断更新每次修改后的 beta 版。GitHub：https://github.com/zTree/zTree_v3 zTree 在线操作演示：http://www.

84483368 / 0评论 2013-06-02

JQuery Tree插件——zTree

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

JeWangZhe / 0评论 2013-03-11

JQuery Tree插件——zTree v3.5.12 版 发布

为了学习如何在 jQuery Plugin 发布，反复练习后，这次只得把版本 从 v3.5.02 直接升到 v3.5.12 了，请见谅。* 由于 jquery 1.9 中移除 event.srcElement 导致的 js 报错的bug。* 在异步加载模式

Kindlecode / 0评论 2013-03-11

JQuery Tree插件——zTree v3.5.02 版 发布

首先要告诉大家，在 jQuery 发布了插件注册功能后，zTree 也已经发布到了 jQuery 的 Plugins 内，同时也在 Github 上进行了发布。这次修正的内容应该还是挺重要的，特别是删除了 jQuery.browser() 的使用，保证了对

DreamLee / 0评论 2013-01-28

zTree v3.5 Css 详解

zTree 的 css 文件就是 zTreeStyle.css，其实 这里面的 css 内容并不多，熟悉 css 的应该看起来还是挺容易的。所以，如果当你使用 zTree 时出现了样式异常的话，就请用调试工具找到冲突的原因，然后将适用于 zTree 的属性

尚衍亮 / 0评论 2012-12-24

和我一起学 Selenium WebDriver（4）——基础篇

对于异步加载的捕获，其实就是一个等待的过程，这在之前的例子中早已看过，只不过需要特别说明一下 WebDriverWait，当超时后就会抛出异常，所以如果你的测试中对于这个部分不需要抛出异常的话，那么最好用 try catch 包起来。这次利用 zTree

Ronnyxie / 0评论 2012-12-10

JQuery Tree插件——zTree v3.5 正式版 发布

由于国庆之后一直忙于公司的项目，因此将 zTree 闲置了1个月左右。这次升级继续以修正 bug 为主，这里要非常感谢各位用户的支持，这次修改的很多 bug 都是大家在使用过程中反映给我的。zTree 目前已经能够满足绝大部分树形需求的操作，对于一棵单纯的

超级赛亚人 / 0评论 2012-11-20

Jquery Ztree树型插件总结

最近在使用树型插件的时候知道了ZTree,总体了解了一下，功能非常强大，在此进行总结。初始加载，一股我们使用树型插件的时候都习惯给树插件设置一个AJAX获取地址，然后让树插件自己去获取，但是在ZTree中有点不一样，ZTree中的AJAX地址不会在初始加载

88284453 / 0评论 2012-11-13

JQuery Tree插件——zTree v3.2 正式版 发布

因最近本人工作较忙，所以 v3.2 拖了很久，还望见谅。这次 v3.2 最主要的工作是针对 exedit 部分的调整，一方面将 addNodes、removeNode、removeChildNodes 这3个方法转移到 core 中方便大家使用，另一方面是

黑色幽默 / 0评论 2012-05-14

zTree2.6、json数据的交互使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。通过对json数据的支持，是它他用起来特别的方便，下面就来介绍一下最简单的应用。{"id":80, "pId":01, "name"

shanhuijava / 0评论 2012-03-06

jQuery zTree 动态树的构建

目前最新版是v3.1，一般不建议使用最新版。下载完成后解压，可以看到其中有三个文件夹和一个更新日志文件。Js文件夹 存放的是所有与zTree相关的js文件。这里min是压缩版，我们在开发的时候建议使用未压缩版的。开发时建议将这些压缩包统一放在一个文件夹下，

springflower / 0评论 2012-02-22

JQuery Tree插件——zTree v3.1 正式版 发布

选在情人节发布 zTree v3.1，希望 zTree 能够拥有更多的“粉丝”。这次 v3.1 整体改动不大，但因为修改了 css 和 图片，所以升级时需要注意了！另外，应不少朋友的要求，我把 API 的页面抽取出来，做了一个简易版的 API 离线文档，方

88570299 / 0评论 2012-02-14

JQuery-zTree.js使用范例

实现Tree树的插件很多，比如常见的UI：Layui、ElementUI、iView ... 。这里我们介绍一个小巧的构建Tree树的插件 zTree.js. zTree.js 官网API介绍的灰常详细了，这里我们实战使用zTree.js构建一棵Tree树

张润东 / 0评论 2018-09-19

vue中如何使用ztree

下面给大家介绍vue ztree 结合使用方法，一起看看吧！项目build的时候自动加载jquery，并且输出到jQuery中，在ztree中会使用到jQuery。

LingPF / 0评论 2018-02-06

jQuery zTree搜索-关键字查询 递归无限层功能实现代码

前两天朋友跟我说要一个ztree的搜索功能，我劈头就是一巴掌：这种方法难道无数前辈还做少了？自己去找，我很忙~然后我默默地蹲着写zTree的搜索方法去了。因为我说了句“找不到是不可能的啊，肯定有很多人早做了无数了，找不到我给你写还请你恰午饭”，然而我也去找

卧斋 / 0评论 2018-01-25

Angular2整合其他插件的方法

前言：现在有很多朋友在接触Angular2的时候，总是不可避免的会使用一些其他的第3方的插件，而这些插件可能都是基于jQuery的，而且也没有对应的angular2的版本，这里我就来讲解一下，在这种情况下，如何整合第3方的jQuery插件。我们以Angul

ouou00 / 0评论 2019-05-08

JQuery EasyUI 结合ztrIee的后台页面开发实例

JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插

inNeed产品经理社 / 0评论 2018-03-01

jQuery zTree 异步加载添加子节点重复问题

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

stationalz / 0评论 2017-11-29

jquery ztree实现右键收藏功能

html部分：。js和css. js:. 总结

responsecool / 0评论 2017-11-20

ztree实现左边动态生成树右边为内容详情功能

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载

JohnnyPig / 0评论 2017-11-03

jQuery 利用ztree实现树形表格的实例代码

最近公司的项目中要做一个树形表格，因为之前一直在用ztree实现基本的树形结构，理所当然的首先想到利用ztree来做。网上找了一下别人做的树形表格，有使用ztree的，也有使用treeTable的，但效果都不太好，于是参考使用ztree的做法自己做了一个，

chenyufei / 0评论 2017-09-27

jQuery使用zTree插件实现可拖拽的树示例

在目前接触到的树插件中，我觉得zTree比较简单，也容易上手。有一次业务需求是将某对象分组树上的对象可以随意拖拽，相当于改变了对象的分组，因此我用到了zTree，对其进行了一些列学习。首先下载zTree所需的相关包，附上官方下载连接：zTree下载，引入相

87407607 / 0评论 2017-09-23

jQuery EasyUI结合zTree树形结构制作web页面

JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插

dyfcsfds / 0评论 2017-09-01

JQuery EasyUI 结合ztrIee的后台页面开发实例

JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,easyui 是一个基于 jQuery 的框架，集成了各种

luyou0 / 0评论 2019-05-06

jQuery zTree树插件动态加载实例代码

由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深，成千上万级，因此一次加载，完全加载不出来。于是需要进行优化为动态加载的方式，以便数据加载，提高

87423361 / 0评论 2017-05-11

jQuery树插件zTree使用方法详解

// { id:1, pId:0, name:"随意勾选 1", open:true},

suis / 0评论 2017-05-02

JQuery Tree 插件 zTree

功能介绍zTree is a multi-functional "tree plug-ins." based on jQuery. The main advantages of zTree includes excellent perf

handsomezsc / 0评论 2018-11-14

jQuery插件zTree实现的多选树效果示例

本文实例讲述了jQuery插件zTree实现的多选树效果。分享给大家供大家参考，具体如下：。{ id:11, pId:1, name:"武汉市", open:true},<ul id="treeMultiple"

张利龙的CSDN / 0评论 2017-03-08

jQuery插件zTree实现的基本树与节点获取操作示例

本文实例讲述了jQuery插件zTree实现的基本树与节点获取操作。分享给大家供大家参考，具体如下：。{ id:11, pId:1, name:"武汉市", open:true},{ id:122, pId:12, name:"

88491874 / 0评论 2017-03-08

jQuery插件zTree实现删除树节点的方法示例

本文实例讲述了jQuery插件zTree实现删除树节点的方法。分享给大家供大家参考，具体如下：。{ id:11, pId:1, name:"武汉市", open:true},{ id:122, pId:12, name:"西塞

恋雨烟梦 / 0评论 2017-03-08

jQuery插件zTree实现删除树子节点的方法示例

本文实例讲述了jQuery插件zTree实现删除树子节点的方法。分享给大家供大家参考，具体如下：。{ id:1, pId:0, name:"湖北省", open:true},{ id:232, pId:23, name:"岳塘

罗惠东 / 0评论 2017-03-08

jQuery插件zTree实现获取一级节点数据的方法

本文实例讲述了jQuery插件zTree实现获取一级节点数据的方法。分享给大家供大家参考，具体如下：。{ id:1, pId:0, name:"湖北省", open:true},

Vipwxs / 0评论 2017-03-08