zTreejQuery树插件 v3.5.30 官方最新版

zTree是一个依靠jQuery实现的多功能“树插件”，zTree具有优异的性能、灵活的配置、多种功能的组合等优点，可以帮助用户更轻松便捷的在jQuery中使用树插件，它支持多种数据格式，样式多样，调整便捷，您可以利用它进行尤树状菜单、树状数据的Web显示、权限管理等项目开发，非常的实用和方便。

zTree软件介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。

zTree 是开源的软件（MIT 许可证）。在开源的效果下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。

zTree特色介绍

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

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

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

4、支持 JSON 数据

5、支持静态 和 Ajax 异步加载节点数据

6、支持任意更换皮肤 / 自定义图标（依靠css）

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

8、提供多种事件响应回调

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

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

11、简单的参数配置实现 灵活多变的功能

zTree功能特点

兼容 IE、FireFox、Chrome 等浏览器（对于IE 6的兼容问题将不做特殊维护）

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

支持 JSON 数据

支持一次性静态生成 和 Ajax 异步加载 两种方式

支持多种事件响应及反馈

支持 Tree 的节点移动、编辑、删除

支持任意更换皮肤 / 个性化图标（依靠css）

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

简单的参数配置实现 灵活多变的功能

zTree特性说明

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

兼容 IE、firefox、Chrome、Opera、Safari 等浏览器

支持 JSON 数据

支持静态 和 Ajax 异步加载节点数据

支持任意更换皮肤 / 自定义图标（依靠css）

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

提供多种事件响应回调

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

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

zTree使用教程

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

2、编写 html 页面

按照以下代码，制作html 页面，访问试试看吧！

注意：

1) "" 是必需的！

2) zTree 的容器 className 别忘了设置为 "ztree"

3) 入门成功后，就可以按照顺序去看 Demo 了，直接看看源码，应该能看懂的

zTree使用说明

ztree如何从后台获取数据：

1.首先就是下载ztree插件库，百度上搜索ztree，即可查询到地址。下载之后解压，然后复制到项目webapp目录下面

2.在页面中引入zTreeStyle.css，jquery，jquery.ztree.core，jquery.ztree.excheck的4个文件。因为ztree是基于jquery的，所以要在ztree之前引入jquery库，注意顺序

3.添加

，注意class属性值为ztree，id可以自定义，后面与js使用的id对应即可

var zNodes=eval('${nodes}');

eval解析后台的节点数据，后台返回过来的是json字符串，eval把字符串解析成js对象

$.fn.zTree.init($("#treeTest"), setting, zNodes);

这个是关键，初始化树形结构，setting是配置对象，zNodes就是后台返回的节点数据然后解析成的json对象

4.添加后台代码，这里后台使用的springmvc，同时后台为了演示，构建一个json的节点数据，然后把数据放到model的nodes属性中返回给前台页面

ZtreeNodeVo对象添加3个字段

private String id;

private String pId;

private String name;

字段对应前台的setting.data配置

5.启动web项目，打开浏览器访问测试页面，如图可以看到树形列表展示出来了

6.但上面这个树形没有勾选框，如果用于树形选择元素的话，则需要修改setting.check配置，enable: true即可

再次刷新页面查看效果，如图多出了复选框可以勾选了

Ztree自定义增删改查组件：

1.首先我们在属性配置文件中addHoverDom，removeHoverDom指向自定义的函数，如下图所示。

2.addHoverDom为鼠标移动到节点的操作，这里我们获取节点信息，根据节点的属性，动态添加字体图标元素，这里用属性type进行判断，根节点是root，叶子节点是obj。根节点只可以增加，叶子节点只能修改、删除等。

3.注意不同的字体图标元素我们配置不同的id值，然后根据id值进行不同的操作，比如增加、修改、删除等。

4.如果采用这种方式的话，点击相应的字体图表会同时调用节点的点击事件方法，因此需要在节点的点击事件中进行相应的处理。

5.当鼠标移出所选的节点时，我们调用removeHoverDom方法即可，该函数主要是将添加的字体元素删除。

6.这里的节点也是使用了字体图标，这样的话能够很方便的修改样式来达到目的，这样就能自定义增删改查组件了。

zTree注意事项

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常见问题

1、zTree 对 jQuery 的版本有要求吗？

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

2、css 样式异常怎么办？

①异常原因：

页面上自定义的 css 与 zTree 的 css 带来冲突

页面上使用其他插件的 css 与 zTree 的 css 带来冲突

修改 zTree 的 css 错误刺激了 zTree

②解决计划：

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

A、避免针对 id 进行样式设定，尽量采用 class 设置。 因为针对 id 设定的样式等级太高，zTree 的样式肯定会被覆盖。

B、zTree 默认的样式不可能将全部 css 定义都重新设置一遍，所以难免有遗漏，如果被遗漏的样式刺激了效果，那么请在 zTreeStyle 内增加上对应的设置内容，而且一旦出现这种情况，也希望你能通知我，谢谢。

C、如果以上都不能解决，那么再看看是否有命名规则冲突，导致了样式冲突

D、最后再看看是否自己修改的 zTree 样式出现了错误

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

你可以利用 Form 或 Ajax 提交数据。

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

制作提交数据的基本方法：拼字符串

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