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

 

 

评论

10 楼 senton 2012-02-08  

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

9 楼 zTreeAPI 2012-02-08  

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了。

8 楼 lqixv 2012-02-08  

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

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

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

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

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

7 楼 zTreeAPI 2012-01-12  

achan2090 写道

我是结合easyui使用

	function rmvNode(){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = zTree.getSelectedNodes();
		for (var i=0, l=nodes.length; i < l; i++) {
			zTree.removeNode(nodes[i]);
			});
		}		
	}

这一行zTree.removeNode(nodes[i]);

我这里提示不支持此属性和方法

大概明白了，貌似是被easyui 把zTree 的removeNode 方法给替代了。 建议你加载js的时候，先加载 easyui 然后再加载 zTree的js，试试看

6 楼 achan2090 2012-01-12  

我是结合easyui使用

	function rmvNode(){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = zTree.getSelectedNodes();
		for (var i=0, l=nodes.length; i < l; i++) {
			zTree.removeNode(nodes[i]);
			});
		}		
	}

这一行zTree.removeNode(nodes[i]);

我这里提示不支持此属性和方法

5 楼 zTreeAPI 2012-01-12  

ruoye_2008 写道

http://www.baby666.cn

请问这个网址怎么访问不了啊？多天试了N次皆不行。

不会吧？？ 难道你被墙了？ 不至于呀。。。我可以正常访问的

4 楼 ruoye_2008 2012-01-12  

http://www.baby666.cn

请问这个网址怎么访问不了啊？多天试了N次皆不行。

3 楼 guoguo007 2012-01-11  

zTreeAPI 写道

guoguo007 写道

你好，我有一个需求是这样的：在树形展示的界面上有几个输入框和一个查询按钮，按钮下方是行政区域的属性展示，需求是在输入框中输入相应的数据，点查询按钮的时候能根据输入的查询条件动态的展示下面的属性结构：比如我输入河北省的行政区域号查询，则下方的行政区域就只显示以河北为根节点的行政区域树。请问这种需求能实现吗？

当然能了，你这个相当于不断重新构造一棵树而已。。。你可以利用异步加载模式，同时使用 reAsyncChildNodes 方法，每次更改行政区号后，就修改你的异步加载url的参数，重新获取节点数据即可。

多谢指点，按照这个思路，我先用现有的东西实现一下。

2 楼 zTreeAPI 2012-01-11  

guoguo007 写道

你好，我有一个需求是这样的：在树形展示的界面上有几个输入框和一个查询按钮，按钮下方是行政区域的属性展示，需求是在输入框中输入相应的数据，点查询按钮的时候能根据输入的查询条件动态的展示下面的属性结构：比如我输入河北省的行政区域号查询，则下方的行政区域就只显示以河北为根节点的行政区域树。请问这种需求能实现吗？

当然能了，你这个相当于不断重新构造一棵树而已。。。你可以利用异步加载模式，同时使用 reAsyncChildNodes 方法，每次更改行政区号后，就修改你的异步加载url的参数，重新获取节点数据即可。

1 楼 guoguo007 2012-01-11  

你好，我有一个需求是这样的：在树形展示的界面上有几个输入框和一个查询按钮，按钮下方是行政区域的属性展示，需求是在输入框中输入相应的数据，点查询按钮的时候能根据输入的查询条件动态的展示下面的属性结构：比如我输入河北省的行政区域号查询，则下方的行政区域就只显示以河北为根节点的行政区域树。请问这种需求能实现吗？