`
zTreeAPI
  • 浏览: 345157 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

    因最近本人工作较忙,所以 v3.2 拖了很久,还望见谅。


    这次 v3.2 最主要的工作是针对 exedit 部分的调整,一方面将 addNodes、removeNode、removeChildNodes 这3个方法转移到 core 中方便大家使用,另一方面是针对拖拽进行了较大修改(主要是彻底解决一些浏览器兼容问题,提升拖拽时的流畅度、改善拖拽时的位置提示信息等),因为修改了 css ,所以升级时需要注意!

 

     这里着重说明 css 升级的注意事项尤其是使用了自定义控件、自定义图标的朋友

     1、请将控件由  button 修改为 span,并且添加 className : “button”

     2、在 自定义部分的 css,将 button 都修改为 span.button

     3、请参考 自定义图标 Demo:http://www.baby666.cn/v3/demo.php#_106 和 自定义控件 Demo:http://www.baby666.cn/v3/demo.php#_504


    另外,这次还添加了两个Demo,尤其是“异步加载模式下全部展开”,是不少朋友提过的,这次特别制作出来供大家参考。


    最新版 zTree 在线操作演示:http://www.baby666.cn/v3/demo.php#_101


    最新版 zTree 快速下载地址:http://code.google.com/p/jquerytree/downloads/list



    下面是 v3.2 的修改记录:

 

   * 【增加】setting.data.key.url 允许修改 treeNode.url 属性

   * 【增加】getNodesByFilter(filter, isSingle) 方法

   * 【增加】"与其他 DOM 拖拽互动" 的 Demo (http://www.baby666.cn/v3/demo.php#_511)

   * 【增加】"异步加载模式下全部展开" 的 Demo (http://www.baby666.cn/v3/demo.php#_512)


   * 【修改】代码结构,将 addNodes、removeNode、removeChildNodes 方法 和 beforeRemove、onRemove 回调 转移到 core 内

   * 【修改】IE7的环境下无子节点的父节点反复展开出现多余空行的 bug

   * 【修改】异步加载时,如果出现网络异常等,会导致 图标显示错误的 bug

   * 【修改】dataFilter中 return null 导致异常 的 bug

   * 【修改】removeChildNodes 方法清空子节点后,无法正常添加节点的 bug

   * 【修改】moveNode 后节点中的自定义元素的事件丢失的 bug

   * 【修改】moveNode 方法中设置 isSilent = true 时,如果移动到已展开的 父节点后,出现异常的 bug

   * 【修改】onClick/onDrag/onDrop 回调中 event 不是原始 event 的 bug

   * 【修改】onDrop 回调中 当拖拽无效时,无法获得 treeNodes 的 bug

   * 【修改】onDrop 无法判断拖拽是 移动还是复制的问题

   * 【修改】未开启异步加载模式时,拖拽节点到子节点为空的父节点内时 出现异常 的 bug

   * 【修改】拖拽过程中,反复在 父节点图标上划动时,会出现停顿的 bug

   * 【修改】拖拽操作时箭头 与 targetNode 背景之间的细节现实问题,便于用户拖拽时更容易区分 prev、next 和 inner 操作

   * 【修改】拖拽操作时IE6/7 下 在 节点<a> 右侧 10px 内会导致 targetNode = root 的 bug

   * 【修改】编辑模式下 默认的编辑按钮、删除按钮点击后,如果相应的 before 回调 return false 时会触发 onClick 回调的 bug

分享到:
评论
24 楼 zTreeAPI 2014-01-26  
wodefake 写道
wodefake 写道
使用了一下3.5版本,感觉很强大,现在也没深入看API,想请教一下:有没有拖拽结束完成这个事件,暂时没在API看到有,或者麻烦指点一下:比如我需要在拖拽结束后进行一些AJAX请求之类的操作,该怎样做呢?

惭愧,居然忘了onDrag & onDrop这对好兄弟

23 楼 wodefake 2014-01-24  
wodefake 写道
使用了一下3.5版本,感觉很强大,现在也没深入看API,想请教一下:有没有拖拽结束完成这个事件,暂时没在API看到有,或者麻烦指点一下:比如我需要在拖拽结束后进行一些AJAX请求之类的操作,该怎样做呢?

惭愧,居然忘了onDrag & onDrop这对好兄弟
22 楼 wodefake 2014-01-24  
使用了一下3.5版本,感觉很强大,现在也没深入看API,想请教一下:有没有拖拽结束完成这个事件,暂时没在API看到有,或者麻烦指点一下:比如我需要在拖拽结束后进行一些AJAX请求之类的操作,该怎样做呢?
21 楼 toney_kissinger 2012-06-26  
看来向左侧偏移的问题其他人也反映过。终于解决了,用的8楼的办法。感谢 ztree作者和其他仁兄。
20 楼 zhangdejun_zdj 2012-06-26  
我发现这个控 用IP地址和域名访问都没什么问题,但是我换成计算机名称访问的时候就会报错。
19 楼 zTreeAPI 2012-06-08  
sd8089730 写道
您好,我想咨询一下 异步加载的同时 使用  手风琴 ..总是只能显示一层

这个..关键是不清楚你到底是如何使用的。 其实zTree本身就能实现一些手风琴似的菜单,比如看我的官网上 Demo 页面,左侧的菜单就是用纯 zTree 实现的。
18 楼 sd8089730 2012-06-07  
您好,我想咨询一下 异步加载的同时 使用  手风琴 ..总是只能显示一层
17 楼 jackyrong 2012-06-04  
zTreeAPI 写道
jackyrong 写道
jackyrong 写道
请教下,我是之前请教过你的,就是一个部门树和一个职位树组合而成的部门-岗位树
的组合,部门来自一个数据表,岗位来自另外一个数据表,上次根据你的指点成功组合了一个“部门-岗位”树了,现在我想实现的是,在每个岗位前加上checkbox,但
每个部门前不给加checkbox,选定的时候,只能选岗位前的checkbox
,我现在设置了部门树:
chkDisabled\":true,但发现部门下的子结点,即岗位前的checkbox也变成禁用了,
请问有什么办法呢?



已解决,谢谢!


这种使用 nocheck 即可!不知是否使用的这个属性



YES,后来看到的
16 楼 zTreeAPI 2012-06-03  
jackyrong 写道
jackyrong 写道
请教下,我是之前请教过你的,就是一个部门树和一个职位树组合而成的部门-岗位树
的组合,部门来自一个数据表,岗位来自另外一个数据表,上次根据你的指点成功组合了一个“部门-岗位”树了,现在我想实现的是,在每个岗位前加上checkbox,但
每个部门前不给加checkbox,选定的时候,只能选岗位前的checkbox
,我现在设置了部门树:
chkDisabled\":true,但发现部门下的子结点,即岗位前的checkbox也变成禁用了,
请问有什么办法呢?



已解决,谢谢!


这种使用 nocheck 即可!不知是否使用的这个属性
15 楼 jackyrong 2012-06-03  
jackyrong 写道
请教下,我是之前请教过你的,就是一个部门树和一个职位树组合而成的部门-岗位树
的组合,部门来自一个数据表,岗位来自另外一个数据表,上次根据你的指点成功组合了一个“部门-岗位”树了,现在我想实现的是,在每个岗位前加上checkbox,但
每个部门前不给加checkbox,选定的时候,只能选岗位前的checkbox
,我现在设置了部门树:
chkDisabled\":true,但发现部门下的子结点,即岗位前的checkbox也变成禁用了,
请问有什么办法呢?



已解决,谢谢!
14 楼 jackyrong 2012-06-03  
请教下,我是之前请教过你的,就是一个部门树和一个职位树组合而成的部门-岗位树
的组合,部门来自一个数据表,岗位来自另外一个数据表,上次根据你的指点成功组合了一个“部门-岗位”树了,现在我想实现的是,在每个岗位前加上checkbox,但
每个部门前不给加checkbox,选定的时候,只能选岗位前的checkbox
,我现在设置了部门树:
chkDisabled\":true,但发现部门下的子结点,即岗位前的checkbox也变成禁用了,
请问有什么办法呢?
13 楼 zTreeAPI 2012-05-24  
dongwb009 写道
有一个问题:使用简单树simpleData: { enable: true },设置完之后,整个展开跟收缩的时候不太流畅。图标隐藏跟显示的速度跟不上按钮的动作。

这两个东西之间没有什么关联呀,不应该出现这种情况的。
12 楼 dongwb009 2012-05-24  
有一个问题:使用简单树simpleData: { enable: true },设置完之后,整个展开跟收缩的时候不太流畅。图标隐藏跟显示的速度跟不上按钮的动作。
11 楼 zTreeAPI 2012-05-22  
laoqian9527 写道
原来ztree的作者也在javaeye

呵呵,在这里已经不短时间了
10 楼 laoqian9527 2012-05-22  
原来ztree的作者也在javaeye
9 楼 baishui2004 2012-05-17  
没有多余的css样式,只单独引入了zTree的样式测试。我的tree是直接绑定在div上的(<div id="treeDemo" class="ztree"></div>),突然想起是不是绑在div上的原因,然后根据楼主提供的demo,我换成了<div><ul id="treeDemo" class="ztree"></ul></div>,然后再测试,在IE6(IE8的IE7浏览模式及IE9的IE7浏览模式下)显示都正常了。
lqixv 写道
我也遇到了和3楼的同样的问题。

对于你所说的样式冲突,我想知道是因为 样式名称 相同导致的冲突吗?

如果是样式名称相同导致的冲突,希望作者能把 ztree 里的样式名称全部命名为类似:_ztree_... 这种样式的名称吧,这样一般就不会出现这种问题了。

我的tree是直接绑定在div上的(<div id="treeDemo" class="ztree"></div>),突然想起是不是绑在div上的原因,然后根据楼主提供的demo,我换成了<div><ul id="treeDemo" class="ztree"></ul></div>,然后再测试,在IE6(IE8的IE7浏览模式及IE9的IE7浏览模式下)显示都正常了。
8 楼 baishui2004 2012-05-17  
zTreeAPI 写道
baishui2004 写道
最外层节点与最左边边线,及最外层节点与次外层节点的连接处的显示异常。

请检查一下 css,看看是否有 外面的css 与 zTree 的css 冲突了?

没有多余的css样式,只单独引入了zTree的样式测试。我的tree是直接绑定在div上的(<div id="treeDemo" class="ztree"></div>),突然想起是不是绑在div上的原因,然后根据楼主提供的demo,我换成了<div><ul id="treeDemo" class="ztree"></ul></div>,然后再测试,在IE6(IE8的IE7浏览模式及IE9的IE7浏览模式下)显示都正常了。
7 楼 zTreeAPI 2012-05-17  
lqixv 写道
我也遇到了和3楼的同样的问题。

对于你所说的样式冲突,我想知道是因为 样式名称 相同导致的冲突吗?

如果是样式名称相同导致的冲突,希望作者能把 ztree 里的样式名称全部命名为类似:_ztree_... 这种样式的名称吧,这样一般就不会出现这种问题了。


是这样的, css 有自己的一套优先级规则,并且 css 内容繁多,目前 zTree 已经按照 .ztree 的className 进行了样式设置,但不可能把所有可能出现的 css 都定义进来,那样 css文件就太大,太夸张了,因此目前只是用了一些基本常用的样式。

一般导致样式冲突的原因有:
1、专门针对细节做了更加详细的定义,导致 zTree 的样式失效
2、定义了某些 zTree 并未定义的样式,导致 zTree 样式异常

解决方案:
利用 chrome 的调试工具,很容易能找到是哪个样式导致的异常,针对个别情况增加 zTree 的css 样式设定,将影响 zTree 的样式覆盖即可。(一般开发项目,团队中都存在 UI 人员,他们对于 css 的问题能够非常快速准确)
6 楼 lqixv 2012-05-17  
我也遇到了和3楼的同样的问题。

对于你所说的样式冲突,我想知道是因为 样式名称 相同导致的冲突吗?

如果是样式名称相同导致的冲突,希望作者能把 ztree 里的样式名称全部命名为类似:_ztree_... 这种样式的名称吧,这样一般就不会出现这种问题了。
5 楼 zTreeAPI 2012-05-17  
baishui2004 写道
最外层节点与最左边边线,及最外层节点与次外层节点的连接处的显示异常。

请检查一下 css,看看是否有 外面的css 与 zTree 的css 冲突了?

相关推荐

    JQuery zTree v3.2 最新版

    Tree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。 zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 ...

    JQuery zTree v3.4 ztree

    JQuery zTree 是一个基于 jQuery 的插件,用于在网页中构建交互式的树形结构。v3.4 版本是其稳定且功能丰富的版本之一,适用于多种应用场景,如数据展示、导航菜单、文件目录等。它以其易用性、高效性和强大的功能...

    JQuery zTree v3.3

    JQuery zTree是一款基于JavaScript的开源树...总之,JQuery zTree v3.3是一个强大且易用的JavaScript树形插件,它通过提供多种操作功能、良好的性能以及灵活的定制选项,满足了开发者在构建网页树形结构时的各种需求。

    JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu

    2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox...

    全网jquery.tree树形菜单打包下载(zTree&jquery-ui&treeview共四种)

    这个压缩包包含四个不同的jQuery树形插件:zTree、jQuery UI Treeview、jQuery UI Draggable Tree和jQuery Simple Treeview。这些插件各有特色,适用于不同的项目需求。 首先,zTree是一款功能强大的jQuery插件,...

    jQuery 树形结构插件 zTree

    **jQuery zTree 插件详解** zTree 是一个基于 jQuery 的强大树形控件,它在Web开发中被广泛应用于构建动态的、交互式的树形结构。zTree 的设计目标是提供高性能、易于配置和丰富的功能,使得开发者可以轻松地在网页...

    Jquery-ztree树形菜单代码并适应移动端

    JQuery-zTree是一款基于jQuery的树形插件,它提供了丰富的功能和良好的性能,尤其适用于构建树形结构的菜单和数据展示。在移动端应用中,zTree能够自适应屏幕尺寸,提供良好的用户体验。本项目提供的代码是针对...

    JQuery完美树形插件-zTree

    JQuery-zTree 的主要功能: 1、兼容 IE、FireFox、Chrome 等浏览器 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及...

    JQuery zTree v2.6

    JQuery zTree是一款基于JavaScript的树形插件,其v2.6版本在功能和性能上进行了优化,为开发者提供了更强大的树形结构处理能力。这个版本的zTree不仅包含了完整的API文档,还附带了一系列经典实例,便于开发者理解和...

    archive_zTree(JQuery Tree) v3.1.zip.zip

    【标题】"archive_zTree(JQuery Tree) v3.1.zip.zip" 提供的是一个用于构建树形结构的jQuery插件——zTree的v3.1版本。zTree是一款广泛应用于网页开发中的JavaScript库,它使得在网页上展示层级关系的数据变得更加...

    JQuery实现树插件 Ztree

    JQuery实现树插件Ztree是一个广泛使用的轻量级前端组件,它为Web开发者提供了构建交互式树形结构的便捷工具。Ztree基于流行的JavaScript库JQuery,因此,如果你已经熟悉JQuery,那么掌握Ztree将相对容易。在本文中,...

    Ztree官方API及实例教程

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等;其中压缩包包括完整的官方文档...

    JQuery zTree v3.5 api

    jQuery zTree 是一款基于 jQuery 的树形插件,广泛应用于网站导航、组织结构展示、文件目录管理等多种场景。v3.5 版本是其一个重要的里程碑,它提供了丰富的功能和优化的性能,使得开发者能够更加灵活地构建树形结构...

    zTree树的Demo及全部文档

    zTree是一款广泛应用于Web开发中的JavaScript插件,主要用于构建交互式的树形结构界面。它具有丰富的功能和良好的可定制性,适用于实现各种树形数据的展示和操作,如文件目录、组织架构、权限管理等场景。在“zTree_...

    JQueryTree zTree

    `JQueryTree` 和 `zTree` 是两个基于JavaScript库,尤其是jQuery框架的插件,用于实现动态、交互式的树形组件。 **JQueryTree** `JQueryTree` 是一个轻量级的jQuery插件,主要用于构建可操作的HTML5树视图。它提供...

    JQuery zTree v3.5.14

    **jQuery zTree v3.5.14** 是一个基于jQuery的树形插件,它在Web开发中广泛用于创建交互式的树形结构。这个版本3.5.14是zTree的一个稳定版本,提供了丰富的功能和优化的性能。下面我们将深入探讨zTree的核心特性、...

    jquery.zTree.js.rar

    jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....

Global site tag (gtag.js) - Google Analytics