当前位置: 代码迷 >> Web前端 >> JQuery Tree插件――zTree v3.2 正式版 公布
  详细解决方案

JQuery Tree插件――zTree v3.2 正式版 公布

热度:588   发布时间:2012-08-27 21:21:57.0
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

2 楼 lqixv 2012-05-17  
谢谢。辛苦了
3 楼 baishui2004 2012-05-17  
楼主您好,很感谢开源如此好的插件,现在我们也用zTree来部分代替ExtJS的tree了。这两天试用3.2的版本,有一个小问题反馈一下,zTree在IE6(IE8的IE7浏览模式及IE9的IE7浏览模式下),显示有点异常,见下图,
4 楼 baishui2004 2012-05-17  
最外层节点与最左边边线,及最外层节点与次外层节点的连接处的显示异常。
5 楼 zTreeAPI 2012-05-17  
baishui2004 写道
最外层节点与最左边边线,及最外层节点与次外层节点的连接处的显示异常。

请检查一下 css,看看是否有 外面的css 与 zTree 的css 冲突了?
6 楼 lqixv 2012-05-17  
我也遇到了和3楼的同样的问题。

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

如果是样式名称相同导致的冲突,希望作者能把 ztree 里的样式名称全部命名为类似:_ztree_... 这种样式的名称吧,这样一般就不会出现这种问题了。
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 的问题能够非常快速准确)
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浏览模式下)显示都正常了。
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浏览模式下)显示都正常了。
10 楼 laoqian9527 2012-05-22  
原来ztree的作者也在javaeye
11 楼 zTreeAPI 2012-05-22  
laoqian9527 写道
原来ztree的作者也在javaeye

呵呵,在这里已经不短时间了
12 楼 dongwb009 2012-05-24  
有一个问题:使用简单树simpleData: { enable: true },设置完之后,整个展开跟收缩的时候不太流畅。图标隐藏跟显示的速度跟不上按钮的动作。
13 楼 zTreeAPI 2012-05-24  
dongwb009 写道
有一个问题:使用简单树simpleData: { enable: true },设置完之后,整个展开跟收缩的时候不太流畅。图标隐藏跟显示的速度跟不上按钮的动作。

这两个东西之间没有什么关联呀,不应该出现这种情况的。
14 楼 jackyrong 2012-06-03  
请教下,我是之前请教过你的,就是一个部门树和一个职位树组合而成的部门-岗位树
的组合,部门来自一个数据表,岗位来自另外一个数据表,上次根据你的指点成功组合了一个“部门-岗位”树了,现在我想实现的是,在每个岗位前加上checkbox,但
每个部门前不给加checkbox,选定的时候,只能选岗位前的checkbox
,我现在设置了部门树:
chkDisabled\":true,但发现部门下的子结点,即岗位前的checkbox也变成禁用了,
请问有什么办法呢?
15 楼 jackyrong 2012-06-03  
jackyrong 写道
请教下,我是之前请教过你的,就是一个部门树和一个职位树组合而成的部门-岗位树
的组合,部门来自一个数据表,岗位来自另外一个数据表,上次根据你的指点成功组合了一个“部门-岗位”树了,现在我想实现的是,在每个岗位前加上checkbox,但
每个部门前不给加checkbox,选定的时候,只能选岗位前的checkbox
,我现在设置了部门树:
chkDisabled\":true,但发现部门下的子结点,即岗位前的checkbox也变成禁用了,
请问有什么办法呢?



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



已解决,谢谢!


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



已解决,谢谢!


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



YES,后来看到的
18 楼 sd8089730 2012-06-07  
您好,我想咨询一下 异步加载的同时 使用  手风琴 ..总是只能显示一层
19 楼 zTreeAPI 2012-06-08  
sd8089730 写道
您好,我想咨询一下 异步加载的同时 使用  手风琴 ..总是只能显示一层

这个..关键是不清楚你到底是如何使用的。 其实zTree本身就能实现一些手风琴似的菜单,比如看我的官网上 Demo 页面,左侧的菜单就是用纯 zTree 实现的。
20 楼 zhangdejun_zdj 2012-06-26  
我发现这个控 用IP地址和域名访问都没什么问题,但是我换成计算机名称访问的时候就会报错。
21 楼 toney_kissinger 2012-06-26  
看来向左侧偏移的问题其他人也反映过。终于解决了,用的8楼的办法。感谢 ztree作者和其他仁兄。
  相关解决方案