JQuery Tree插件 - zTree v3.0 正式版 发布
fmms 12年前
<img alt="JQuery Tree插件 - zTree v3.0 正式版 发布" src="https://simg.open-open.com/show/1e3ba2ff18a27543904d5f1c1c931e49.jpg" width="350" height="233" /> <p>zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件</p> <ul> <li>兼容 IE、FireFox、Chrome 等浏览器</li> <li>在一个页面内可同时生成多个 Tree 实例 </li> <li>支持 JSON 数据 </li> <li>支持一次性静态生成 和 Ajax 异步加载 两种方式 </li> <li>支持多种事件响应及反馈 </li> <li>支持 Tree 的节点移动、编辑、删除 </li> <li>支持任意更换皮肤 / 个性化图标（依靠css） </li> <li>支持极其灵活的 checkbox 或 radio 选择功能 </li> <li>简单的参数配置实现 灵活多变的功能 </li> </ul> <p><img alt="JQuery Tree插件 - zTree v3.0 正式版 发布" src="https://simg.open-open.com/show/69a621ed76b524fd5a0603cde8b59e3d.png" width="500" height="352" /></p> <span style="font-size:small;">在大家的帮助 和 关注下，今天 zTree v3.0 正式版 可以发布了。 v3.0 正式版在功能、性能方便比 v2.x 版本都有了很多改善，尤其是性能方面。用过 v3.0 beta 版本的朋友应该已经体验到了。</span> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> 但还要再提提醒大家，v3.0 在代码架构上的改动较大，所以升级 v2.x 版本的 zTree 必须要配合修改代码，不能仅仅升级 js 文件。 对于没有使用过 v3.0 beta 的朋友，升级前请先浏览 v2.6 与 v3.0 的对照说明：<a style="color:#108ac6;" href="/misc/goto?guid=4958189101474306188" target="_blank">http://www.baby666.cn/v3/faq.php#_101</a> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> 另外，为了便于让 zTree 走出国门，这次还将 网站、Demo、API文档等都做成了 中文、英文两套。可惜本人英文水平有限，里面会有很多错误，希望大家多多包涵，同时也恳请英文好的朋友多帮我找找错误，并且通知我，谢谢！</span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> 由于时间关系，再加上我觉得目前 API文档 还不够完善（尤其是英语方面），所以尚未制作 离线版本，参考 API文档还请继续在线浏览吧：<a style="color:#108ac6;" href="/misc/goto?guid=4958189102226062902" target="_blank">http://www.baby666.cn/v3/api.php</a> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> 在线操作演示：<a style="color:#108ac6;" href="/misc/goto?guid=4958325016929800111" target="_blank">http://www.baby666.cn/v3/demo.php#_101</a></span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> 快速下载地址：<a style="color:#108ac6;" href="/misc/goto?guid=4958184533850811387" target="_blank">http://code.google.com/p/jquerytree/downloads/list</a></span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> <span style="background-color:#ffff99;"> 请特别注意，v2.x 中的 <strong style="font-weight:bold;"><span style="text-decoration:line-through;">treeNode.nodes</span></strong> 和 v3.0 beta 中的 <strong style="font-weight:bold;"><span style="text-decoration:line-through;">treeNode.childs</span></strong> 已经被修改为 <strong style="font-weight:bold;"><span style="color:#ff0000;">treeNode.children</span></strong></span></span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"><br /> </span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:small;"> 下面把 v3.0 beta 和 正式版两次的修改记录都公布一下，便于大家了解：</span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><span style="font-size:x-small;"><strong style="font-weight:bold;"> v3.0 beta 修改内容：</strong></span></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】zTree 的 js 代码架构全面修改，并且拆分 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】zTree 的 css 样式全面修改，对浏览器可以更好地兼容，同时解决了以前1个像素差的问题 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【优化】采用延迟加载技术，一次性加载大数据量的节点性能飞速提升 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】支持多节点同时选中、拖拽 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】checkNode、checkAllNodes 等多种方法 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】IE6 自动取消动画展开、折叠的功能 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修正】异步加载 & 编辑模式 能够更完美的共存 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修正】setting 配置更加合理，并且增加了若干项配置参数 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修正】treeNode 节点数据的属性更加合理，并且增加了一些方法 </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修正】拖拽操作更加灵活方便，更容易制定自己的规则</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"><strong style="font-weight:bold;"><span style="font-size:x-small;"> v3.0 正式版 修改内容：</span></strong></p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】setting.check.autoCheckTrigger 默认值 false，可以设置联动选中时是否触发事件回调函数</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】setting.callback.beforeEditName 回调函数，以保证用户可以捕获点击编辑按钮的事件</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】treeNode.chkDisabled 属性，显示 checkbox 但是用户无法修改 checkbox 状态，并且该 checkbox 会影响父节点的 checkbox 的半选状态</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】setting.check.nocheckInherit 属性，用户设置子节点继承 nocheck 属性，用于批量初始化节点，不适用于已经显示的节点</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】setting.edit.drag.autoExpandTrigger 默认值 false，可以设置自动展开、折叠操作时是否触发事件回调函数</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】setting.view.nameIsHTML 默认值 false，允许用户对 name 设置 DOM 对象</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】treeNode.click 属性的说明文档</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】treeObj.setChkDisabled 方法用于设置 checkbox / radio disabled 状态</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【增加】treeNode.halfCheck 属性，用于强制设定节点的半选状态</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> </p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】异步加载 & 编辑功能 共存时，拖拽节点 或 增加节点 导致 ie 上报错的 bug （apply 方法引起）</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】zTreeStyle 样式冲突</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】setting.data.key.title 默认值设置为 ""，初始化时自动赋值为 setting.data.key.name 这样可避免希望 title 与 name 一致的用户反复设置参数</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】点击叶子节点的连接线会触发 expand 事件的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】IE 下 点击叶子节点连线会出现虚线框的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】updateNode 导致 checkbox 半选状态错误的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】checkNode 方法实现 toggle 操作, 取消 expandAll 方法的 toggle 操作</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】zTree 内鼠标移动会抢页面上 input 内的焦点的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】beforeRename / onRename 的触发方式——即使名称内容未改变也会触发，便于用户配合 beforeEditName 捕获编辑状态的结束，赋予用户更多调整规则的权利</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】与 easyUI 共存时无法拖拽的bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】beforeRename 在 Firefox 下如果利用 alert，会触发两次的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】checkNode/expandNode/removeNode 方法，默认不触发回调函数，恢复 v2.6 的默认状态，同时增加 callbackFlag 参数，设置为 true 时，可以触发回调函数</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】IE9下“根据参数查找节点”的Demo 报错：行14 重新声明常量属性(Demo 自身的问题，定义了history变量)</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】初始化 zTree 时 onNodeCreated 事件回调函数中无法 用 getZTreeObj 获取 zTree 对象的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】setting.edit.drag.prev / next / inner 参数，增加被拖拽的节点集合</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】异步加载模式下，otherParam 使用Array数组会出错的 bug。例如： ["id", "1", "name", "test"]</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】FireFox 下多棵树拖拽异常的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】exedit 中调用 excheck库的方法时没有进行容错处理，导致如果只加入 exedit 而没有 excheck的时候，会出现 js 错误</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】显示 checkbox 的 zTree 在编辑模式下，移动节点不会更新父节点半选状态的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】treeNode.childs --> children; treeObject.removeChilds --> removeChildNodes; setting.data.key.childs --> children（英文不好惹的祸！抱歉了！）</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】onRemove 回调中得到的 treeNode 还可以查找 preNode、nextNode 的bug。 修正后，getPreNode 和 getNextNode 都返回 null； 为了便于查找父节点，getParentNode 仍保留</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】简单数据模式下，如果 id 与 pId 的值相同会导致该节点无法正常加载的 bug</p> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica,Tahoma,Arial,sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"> * 【修改】移动或删除中间节点会导致最后一个节点连接线图标变小的 bug<br /> <br /> </p> <br /> <p style="text-align:left;padding-bottom:0px;line-height:18px;padding-left:0px;padding-right:0px;font-family:Helvetica, Tahoma, Arial, sans-serif;margin-bottom:0px;font-size:12px;padding-top:0px;"></p>