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

    在大家的帮助 和 关注下，今天 zTree v3.0 正式版 可以发布了。 v3.0 正式版在功能、性能方便比 v2.x 版本都有了很多改善，尤其是性能方面。用过 v3.0 beta 版本的朋友应该已经体验到了。

 

    但还要再提提醒大家，v3.0 在代码架构上的改动较大，所以升级 v2.x 版本的 zTree 必须要配合修改代码，不能仅仅升级 js 文件。 对于没有使用过 v3.0 beta 的朋友，升级前请先浏览 v2.6 与 v3.0 的对照说明：http://www.baby666.cn/v3/faq.php#_101 

    另外，为了便于让 zTree 走出国门，这次还将 网站、Demo、API文档等都做成了 中文、英文两套。可惜本人英文水平有限，里面会有很多错误，希望大家多多包涵，同时也恳请英文好的朋友多帮我找找错误，并且通知我，谢谢！

    由于时间关系，再加上我觉得目前 API文档 还不够完善（尤其是英语方面），所以尚未制作 离线版本，参考 API文档还请继续在线浏览吧：http://www.baby666.cn/v3/api.php 

    在线操作演示：http://www.baby666.cn/v3/demo.php#_101

    快速下载地址：http://code.google.com/p/jquerytree/downloads/list

    请特别注意，v2.x 中的 treeNode.nodes 和 v3.0 beta 中的 treeNode.childs 已经被修改为 treeNode.children

    下面把 v3.0 beta 和 正式版两次的修改记录都公布一下，便于大家了解：

 

    v3.0 beta 修改内容：

   * 【修改】zTree 的 js 代码架构全面修改，并且拆分 

   * 【修改】zTree 的 css 样式全面修改，对浏览器可以更好地兼容，同时解决了以前1个像素差的问题 

   * 【优化】采用延迟加载技术，一次性加载大数据量的节点性能飞速提升 

   * 【增加】支持多节点同时选中、拖拽 

   * 【增加】checkNode、checkAllNodes 等多种方法 

   * 【增加】IE6 自动取消动画展开、折叠的功能 

   * 【修正】异步加载 & 编辑模式 能够更完美的共存 

   * 【修正】setting 配置更加合理，并且增加了若干项配置参数 

   * 【修正】treeNode 节点数据的属性更加合理，并且增加了一些方法 

   * 【修正】拖拽操作更加灵活方便，更容易制定自己的规则

 

    v3.0 正式版 修改内容：

   * 【增加】setting.check.autoCheckTrigger 默认值 false，可以设置联动选中时是否触发事件回调函数

   * 【增加】setting.callback.beforeEditName 回调函数，以保证用户可以捕获点击编辑按钮的事件

   * 【增加】treeNode.chkDisabled 属性，显示 checkbox 但是用户无法修改 checkbox 状态，并且该 checkbox 会影响父节点的 checkbox 的半选状态

   * 【增加】setting.check.nocheckInherit 属性，用户设置子节点继承 nocheck 属性，用于批量初始化节点，不适用于已经显示的节点

   * 【增加】setting.edit.drag.autoExpandTrigger 默认值 false，可以设置自动展开、折叠操作时是否触发事件回调函数

   * 【增加】setting.view.nameIsHTML 默认值 false，允许用户对 name 设置 DOM 对象

   * 【增加】treeNode.click 属性的说明文档

   * 【增加】treeObj.setChkDisabled 方法用于设置 checkbox / radio disabled 状态

   * 【增加】treeNode.halfCheck 属性，用于强制设定节点的半选状态

 

   * 【修改】异步加载 & 编辑功能 共存时，拖拽节点 或 增加节点 导致 ie 上报错的 bug （apply 方法引起）

   * 【修改】zTreeStyle 样式冲突

   * 【修改】setting.data.key.title 默认值设置为 ""，初始化时自动赋值为 setting.data.key.name 这样可避免希望 title 与 name 一致的用户反复设置参数

   * 【修改】点击叶子节点的连接线会触发 expand 事件的 bug

   * 【修改】IE 下 点击叶子节点连线会出现虚线框的 bug

   * 【修改】updateNode 导致 checkbox 半选状态错误的 bug

   * 【修改】checkNode 方法实现 toggle 操作, 取消 expandAll 方法的 toggle 操作

   * 【修改】zTree 内鼠标移动会抢页面上 input 内的焦点的 bug

   * 【修改】beforeRename / onRename 的触发方式——即使名称内容未改变也会触发，便于用户配合 beforeEditName 捕获编辑状态的结束，赋予用户更多调整规则的权利

   * 【修改】与 easyUI 共存时无法拖拽的bug

   * 【修改】beforeRename 在 Firefox 下如果利用 alert，会触发两次的 bug

   * 【修改】checkNode/expandNode/removeNode 方法，默认不触发回调函数，恢复 v2.6 的默认状态，同时增加 callbackFlag 参数，设置为 true 时，可以触发回调函数

   * 【修改】IE9下“根据参数查找节点”的Demo 报错：行14 重新声明常量属性(Demo 自身的问题，定义了history变量)

   * 【修改】初始化 zTree 时 onNodeCreated 事件回调函数中无法 用 getZTreeObj 获取 zTree 对象的 bug

   * 【修改】setting.edit.drag.prev / next / inner 参数，增加被拖拽的节点集合

   * 【修改】异步加载模式下，otherParam 使用Array数组会出错的 bug。例如： ["id", "1", "name", "test"]

   * 【修改】FireFox 下多棵树拖拽异常的 bug

   * 【修改】exedit 中调用 excheck库的方法时没有进行容错处理，导致如果只加入 exedit 而没有 excheck的时候，会出现 js 错误

   * 【修改】显示 checkbox 的 zTree 在编辑模式下，移动节点不会更新父节点半选状态的 bug

   * 【修改】treeNode.childs --> children; treeObject.removeChilds --> removeChildNodes; setting.data.key.childs --> children（英文不好惹的祸！抱歉了！）

   * 【修改】onRemove 回调中得到的 treeNode 还可以查找 preNode、nextNode 的bug。 修正后，getPreNode 和 getNextNode 都返回 null； 为了便于查找父节点，getParentNode 仍保留

   * 【修改】简单数据模式下，如果 id 与 pId 的值相同会导致该节点无法正常加载的 bug

   * 【修改】移动或删除中间节点会导致最后一个节点连接线图标变小的 bug

 

 

评论

30 楼 zTreeAPI 2012-05-04  

whxia320 写道

zTree挺多的，但是功能越多越臃肿，其实有时候我们只用到其中一个，不知道每个功能能否定制呢？

没错儿，越多越臃肿，所以 v3 版本中做了拆分 分为 core、exedit、excheck 你可以进行组合。 最近本的使用core即可。不知道你还需要定制哪些内容？

29 楼 whxia320 2012-05-04  

zTree挺多的，但是功能越多越臃肿，其实有时候我们只用到其中一个，不知道每个功能能否定制呢？

28 楼 zTreeAPI 2012-02-13  

youtops 写道

zTree这个插件真的非常好，希望这个插件越来越好！
Demo 带 checkbox 的多选下拉菜单 -- zTree
http://www.baby666.cn/v3/demo.php#_509

这个实例中选择加上如下的方式会不会更方便？
1，选择大类后自动选择小类会更方便；
2，shift按键结合选择

感谢支持， 你的建议很好，只不过 目前 Demo 以简单为主，再加上时间问题，恐怕目前还不回增加你提的内容，不过我会记录下来，有机会制作高级应用的Demo。

27 楼 youtops 2012-02-12  

zTree这个插件真的非常好，希望这个插件越来越好！
Demo 带 checkbox 的多选下拉菜单 -- zTree
http://www.baby666.cn/v3/demo.php#_509

这个实例中选择加上如下的方式会不会更方便？
1，选择大类后自动选择小类会更方便；
2，shift按键结合选择

26 楼 lqixv 2012-02-11  

zTreeAPI 写道

lqixv 写道

zTreeAPI 写道

lqixv 写道

你好。我有个问题请指教。

我的一个节点的内容，本身就是一个 json 对象。例如这样的节点：
{ id:234, pId:23, name:{'cn':'中文','en':'english'}}

在页面开始的地方，我定义了一个变量，保存了我想取的属性，比如，theName = 'cn'，我想在显示这颗树时，可以根据这个变量来显示对应的内容。

比如，如果 theName = 'cn'，我希望对应树的节点显示“中文”，如果 theName='en'，我希望树节点能显示 “english”。

这个怎么做？希望能得到指点，谢谢！

不好意思，对于name不支持何种嵌套的属性获取。 不知道你的数据是如何生成的，如果你能直接生成这样的格式： { id:234, pId:23, 'cn':'中文','en':'english'} 就 so easy了。

谢谢回复。
我的本意是，在多语言的环境下，如果用户浏览的是英文版本，我希望我的树出来的是英文，中文环境是中文。因此，我有个字段用 json 格式保存了多种语言环境的 内容。就出现了我前台提的问题。如果生成你说的格式，是没问题的。但我通过什么办法，让这颗树显示的内容是 en 对应的值呢（在英文环境）

你对应英文版和中文版做两套 setting 就是了呀，或者 设置 setting.data.key.name 的对象用某个环境变量，英文版时就设置为en、中文版时就设置为cn即可

只能说一句，太感谢了 

25 楼 sisimoon 2012-02-10  

zTreeAPI 写道

sisimoon 写道

说错了，是jQuery easyui 和 ztree 结合使用

呵呵，不能说回复的太快了，只能说你的运气好，碰巧我上来看到了消息。 你和 easyUI 一起使用没有发现冲突，也要感谢在 v3.0 之前就是用 zTree 的朋友呀，没有他们提出的建议和发现的 bug，你肯定不会用的这么爽

=========================
是啊，前人栽树后人乘凉。easyui的 tree 有些单调，而dhtmlx的tree又比较臃肿，zTree也是基于jQuery，跟easyui一起用再合适不过了。

24 楼 zTreeAPI 2012-02-10  

sisimoon 写道

说错了，是jQuery easyui 和 ztree 结合使用

呵呵，不能说回复的太快了，只能说你的运气好，碰巧我上来看到了消息。 你和 easyUI 一起使用没有发现冲突，也要感谢在 v3.0 之前就是用 zTree 的朋友呀，没有他们提出的建议和发现的 bug，你肯定不会用的这么爽

23 楼 sisimoon 2012-02-10  

说错了，是jQuery easyui 和 ztree 结合使用

22 楼 sisimoon 2012-02-10  

zTreeAPI 写道

sisimoon 写道

你好博主：问个问题，如果设置动态设置某个节点的名称？
比如我调用了另外一个页面B更新了某个节点的一些属性，当我关闭B页面的时候要用脚本把tree上面对应的node名称改掉，如何实现？
我不想刷新整个树，太耗资源了。

利用 getNodeByParam 方法可以找到你需要操作的节点数据，然后直接修改treeNode.name，修改后利用 updateNode 方法更新即可！

我靠，你回复的也太快了吧！！！！！
真是太赞了，我这阵子一直把jQuery和zTree3.0结合使用，到目前位置没有遇到冲突，再赞一个。

21 楼 zTreeAPI 2012-02-10  

sisimoon 写道

你好博主：问个问题，如果设置动态设置某个节点的名称？
比如我调用了另外一个页面B更新了某个节点的一些属性，当我关闭B页面的时候要用脚本把tree上面对应的node名称改掉，如何实现？
我不想刷新整个树，太耗资源了。

利用 getNodeByParam 方法可以找到你需要操作的节点数据，然后直接修改treeNode.name，修改后利用 updateNode 方法更新即可！

20 楼 sisimoon 2012-02-10  

你好博主：问个问题，如果设置动态设置某个节点的名称？
比如我调用了另外一个页面B更新了某个节点的一些属性，当我关闭B页面的时候要用脚本把tree上面对应的node名称改掉，如何实现？
我不想刷新整个树，太耗资源了。

19 楼 zTreeAPI 2012-02-10  

lqixv 写道

zTreeAPI 写道

lqixv 写道

你好。我有个问题请指教。

我的一个节点的内容，本身就是一个 json 对象。例如这样的节点：
{ id:234, pId:23, name:{'cn':'中文','en':'english'}}

在页面开始的地方，我定义了一个变量，保存了我想取的属性，比如，theName = 'cn'，我想在显示这颗树时，可以根据这个变量来显示对应的内容。

比如，如果 theName = 'cn'，我希望对应树的节点显示“中文”，如果 theName='en'，我希望树节点能显示 “english”。

这个怎么做？希望能得到指点，谢谢！

不好意思，对于name不支持何种嵌套的属性获取。 不知道你的数据是如何生成的，如果你能直接生成这样的格式： { id:234, pId:23, 'cn':'中文','en':'english'} 就 so easy了。

谢谢回复。
我的本意是，在多语言的环境下，如果用户浏览的是英文版本，我希望我的树出来的是英文，中文环境是中文。因此，我有个字段用 json 格式保存了多种语言环境的 内容。就出现了我前台提的问题。如果生成你说的格式，是没问题的。但我通过什么办法，让这颗树显示的内容是 en 对应的值呢（在英文环境）

你对应英文版和中文版做两套 setting 就是了呀，或者 设置 setting.data.key.name 的对象用某个环境变量，英文版时就设置为en、中文版时就设置为cn即可

18 楼 lqixv 2012-02-09  

zTreeAPI 写道

senton 写道

哥们，你的英语比较差啊，children竟然取名为childs

如果你英文不错，希望你能多看看英文版。。帮我挑挑错误吧，谢谢了！

17 楼 lqixv 2012-02-09  

zTreeAPI 写道

lqixv 写道

你好。我有个问题请指教。

我的一个节点的内容，本身就是一个 json 对象。例如这样的节点：
{ id:234, pId:23, name:{'cn':'中文','en':'english'}}

在页面开始的地方，我定义了一个变量，保存了我想取的属性，比如，theName = 'cn'，我想在显示这颗树时，可以根据这个变量来显示对应的内容。

比如，如果 theName = 'cn'，我希望对应树的节点显示“中文”，如果 theName='en'，我希望树节点能显示 “english”。

这个怎么做？希望能得到指点，谢谢！

不好意思，对于name不支持何种嵌套的属性获取。 不知道你的数据是如何生成的，如果你能直接生成这样的格式： { id:234, pId:23, 'cn':'中文','en':'english'} 就 so easy了。

谢谢回复。
我的本意是，在多语言的环境下，如果用户浏览的是英文版本，我希望我的树出来的是英文，中文环境是中文。因此，我有个字段用 json 格式保存了多种语言环境的 内容。就出现了我前台提的问题。如果生成你说的格式，是没问题的。但我通过什么办法，让这颗树显示的内容是 en 对应的值呢（在英文环境）

16 楼 zTreeAPI 2012-02-08  

huangsky 写道

你好，ztree中删除和修改功能能否重写事件，例如我不想编辑的时候树的节点变成一个文本框（有时候节点名称稍微长点，变成文本框影响美观），我可以在我自己设定的控件里显示节点名称，然后修改了后，提交了再去改变节点的名称。

当然可以了， 请看 beforeRemove 和 beforeEditName 两个 callback，你只需要 在这两个 callback 里面 return false 同时触发自己的方法就是了。 修改后在自己的方法里面利用 removeNode 和 updateNode 方法就可以了。

15 楼 huangsky 2012-02-08  

你好，ztree中删除和修改功能能否重写事件，例如我不想编辑的时候树的节点变成一个文本框（有时候节点名称稍微长点，变成文本框影响美观），我可以在我自己设定的控件里显示节点名称，然后修改了后，提交了再去改变节点的名称。

14 楼 zTreeAPI 2012-02-08  

huangsky 写道

你好，ztree的节点的增删改的按钮，一设置就是整颗树都套用同套模式了，能否做到自由控制节点的增删改按钮。例如A节点我只想要增加按钮，B节点我要删除按钮。

增 按钮 不说了吧，这个没有默认的，有也是你自己利用添加自定义控件制作的，所以完全可以自行控制。 我来给你说说 删、改 这两个按钮——请看 API 中 showRemoveBtn 和 showRenameBtn 这两个说明，他们可以设定为 Function， 利用 Function 完全可以实现你的需求。

13 楼 zTreeAPI 2012-02-08  

senton 写道

哥们，你的英语比较差啊，children竟然取名为childs

如果你英文不错，希望你能多看看英文版。。帮我挑挑错误吧，谢谢了！

12 楼 zTreeAPI 2012-02-08  

senton 写道

哥们，你的英语比较差啊，children竟然取名为childs

献丑了！这个“比较”估计还算是抬举了

11 楼 huangsky 2012-02-08  

你好，ztree的节点的增删改的按钮，一设置就是整颗树都套用同套模式了，能否做到自由控制节点的增删改按钮。例如A节点我只想要增加按钮，B节点我要删除按钮。