`
zTreeAPI
  • 浏览: 347512 次
  • 性别: 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-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 zTree v3.4 ztree

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

    JQuery zTree v3.3

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

    全网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 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.47.zip

    《JQuery zTree v3.5.47:构建动态树形菜单的利器》 JQuery zTree是一款基于JavaScript的开源库,专用于构建交互式的树形菜单。在这个版本v3.5.47中,它继续提供高效、灵活且功能丰富的解决方案,尤其适用于网页中...

    JQuery zTree v3.5 api

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

    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....

    JQueryTree zTree

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

    zTree树的Demo及全部文档

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

    JQuery zTree v3.5.14

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

Global site tag (gtag.js) - Google Analytics