zTree v2.x 升级 v3.0 之 异步加载 与 添加节点的错误分析

      (补充： 计划 v3.1 中修改进行异步加载的逻辑： 父节点默认状态下只能异步加载一次，除非 使用 reAsyncChildNodes 方法强行进行异步加载。这样也就不会出现这个要讨论的错误了。)

    zTree v3.0 对于可编辑模式 和 异步加载模式共存的处理做了一些完善，从而也会导致使用原先 v2.x 实现的方法放在 v3.0 下出现异常。

 

    这里针对 onAsyncSuccess 回调函数中 使用  addNodes 添加节点 的问题做一个详细说明。

 

    错误现象（此问题由：overlord 朋友提供）：

 

    利用Demo中的 async.html 做测试，让 setting 中增加 onAsyncSuccess 的配置，代码如下：

 

 

onAsyncSuccess:function(event, treeId, treeNode, msg){//如果没有加载到子结点就会执行多次
	console.log("onAsyncSuccess...");
	var da = $.fn.zTree.getZTreeObj("treeDemo").addNodes(treeNode,{name:'你好',isParent:true}, true);
}

 

    A、如果异步加载的地址只能输出 []，表明是空结果，这样会发现根节点显示正常，只有一个“你好”的节点，但如果点击展开“你好”节点后，会发现会自动添加 3 个“你好”的子节点。 

 

    B、如果异步加载能过输出正常节点数据，那么不会出现此问题，每次异步加载后都只添加 1 个 "你好" 的子节点。

 

    为何如此使用？ 

 

    我个人推断，是因为 v2.x 中添加子节点时，父节点不会自动异步加载已有的子节点，所以利用expandNode方法让父节点展开，同时捕获 asyncSuccess 方法确认加载完毕 并 添加新的子节点。

 

    （v3.0 中完全不需要这么操作，只需要直接使用 addNodes 方法，zTree 会自动先去异步加载已有的子节点，然后再添加新的子节点。）

 

    因此，我要说对于 v3.0 来说，要尽量避免在 onAsyncSuccess 回调中使用  addNodes、reAsyncChildNodes 这两个方法，因为如果使用不当有可能会造成事务流程的多次循环。

 

    如果你有兴趣做深入了解，请先看看 v2.x 和 v3.0 中针对 addNodes 和 expandNode 两个操作的事务流程图

 

 

当你理解的上面的流程图以后，再看看针对这个错误制作的事务流程图，就会明白为何会产生3个节点了。（其中每种颜色代表了一次线程的操作过程）

 

 

这里特别感谢  overlord  和 czwlucky 两位朋友的大力协助。 同时也希望大家能一起讨论这个问题。

评论

8 楼 zTreeAPI 2012-08-14  

lixiang21 写道

大哥 我正在使用您写的树 遇到点问题 我加载的时候要 点击后去寻找 然后加载子节点 能不能加载完第一级节点之后 自动加载子节点啊? 这样用户就不需要等待了！！谢谢！！

参考这个 Demo 吧： http://www.ztree.me/v3/demo.php#_512

7 楼 lixiang21 2012-08-13  

大哥 我正在使用您写的树 遇到点问题 我加载的时候要 点击后去寻找 然后加载子节点 能不能加载完第一级节点之后 自动加载子节点啊? 这样用户就不需要等待了！！谢谢！！

6 楼 zTreeAPI 2012-01-19  

renjie120 写道

....

呵呵，大家互相学习嘛。 如果你当初的 gridTree 也直接做成开源，并且坚持下来的话，不一定会比 zTree 差的哟！ zTree 能做到现在这样绝对是开源的力量！

5 楼 renjie120 2012-01-18  

zTreeAPI 写道

renjie120 写道

使用zTree感觉很棒,以后会一直使用你的树,谢谢你的奉献

问一个小问题,就是得到treeNode.tId的时候,为什么不是json串里面的id属性?而是自动生成的"treeid+数字"的串.

要配置属性么?我配置了simpleData.idKey属性,也没有效果,点击tree节点的时候,弹出id仍然不是我后台的id.

很高兴你能喜欢 zTree。

tId 是zTree 内部的节点唯一标识，用于保证节点绝对的唯一！ 节点数据的 id 属性对于 zTree 来说不是必须的，只有使用简单数据模式才有作用。

另外 因为 我无法对用户数据中的 id 进行控制，所以不排除会出现相同 id 的情况；因此 tId 就成了节点绝对的唯一标识，而且 DOM 也是使用 tId 当做id。 如果你需要获取你的id，那么只需要从节点数据 treeNode 中得到 id 属性即可，例如： treeNode.id

在 zTree 的各个接口或回调函数中基本上都会把 treeNode 传过来，便于用户使用。 另外 getNodeByTId  getNodeByParam  getNodesByParam getNodesByParamFuzzy 几个方法也可以帮你快速查找满足你需求的节点数据。

ok,谢谢你.没有想到你回复这么快.
我也写过一个jquery插件,表格树GridTree,没有你的好.呵呵 向你学习.

4 楼 zTreeAPI 2012-01-18  

renjie120 写道

使用zTree感觉很棒,以后会一直使用你的树,谢谢你的奉献

问一个小问题,就是得到treeNode.tId的时候,为什么不是json串里面的id属性?而是自动生成的"treeid+数字"的串.

要配置属性么?我配置了simpleData.idKey属性,也没有效果,点击tree节点的时候,弹出id仍然不是我后台的id.

很高兴你能喜欢 zTree。

tId 是zTree 内部的节点唯一标识，用于保证节点绝对的唯一！ 节点数据的 id 属性对于 zTree 来说不是必须的，只有使用简单数据模式才有作用。

另外 因为 我无法对用户数据中的 id 进行控制，所以不排除会出现相同 id 的情况；因此 tId 就成了节点绝对的唯一标识，而且 DOM 也是使用 tId 当做id。 如果你需要获取你的id，那么只需要从节点数据 treeNode 中得到 id 属性即可，例如： treeNode.id

在 zTree 的各个接口或回调函数中基本上都会把 treeNode 传过来，便于用户使用。 另外 getNodeByTId  getNodeByParam  getNodesByParam getNodesByParamFuzzy 几个方法也可以帮你快速查找满足你需求的节点数据。

3 楼 renjie120 2012-01-18  

使用zTree感觉很棒,以后会一直使用你的树,谢谢你的奉献

问一个小问题,就是得到treeNode.tId的时候,为什么不是json串里面的id属性?而是自动生成的"treeid+数字"的串.

要配置属性么?我配置了simpleData.idKey属性,也没有效果,点击tree节点的时候,弹出id仍然不是我后台的id.

2 楼 zTreeAPI 2012-01-18  

leocaan 写道

您好，ztree非常强大，是我所见过的最好的tree，有些个人建议，敬请斟酌：
1、能否修改或封装成widget插件模型，使用和学习更方便，也易于其他人进行插件集成；
2、能否像jstree一样内部用插件模型，因为ztree太强大，却不是每个功能都需要在特定环境应用的，内部再用功能插件来扩展或重载，各插件还可以在不同文件中，减少不必要的加载；
                                                  [e-mail]
                                           陈栋

非常感谢你的建议！

1、目前 v3.0 已经是为了这个目的 在 v2.6 的基础上进行了一定拆分，但肯定还没有到达你理想中那种如此细微功能的拆分。但现在 v3.0 的架构在一定程度上应该也是可以随意编写zTree 的扩展功能，这方面可以模仿 excheck 和 exedit 两个 js 的编写方式。 但很抱歉，由于时间关系，我还无法专门制作高级使用包括编写扩展功能包的各种说明。

2、对于是否能封装成简单的 widget 插件模型，还有待商榷。毕竟 zTree 不是一个简单的 UI 小插件，只需要和 某个 DOM 集成起来就快速实现全部功能。

3、我在制作 zTree 时，没有使用通常的方案直接用 DOM 当做主体进行功能扩展，而是以数据为中心，树的业务逻辑为主干，DOM 主要就是为了界面显示和操作。 另外，既然要做 开源插件，也是希望能尽可能满足各种千奇百怪的需求，所以 我在制作 zTree 时也更希望 zTree 能够成为一种 树的框架核心，zTree 提供各种功能的接口，用户可以随意在 zTree 的基础上进行扩展和使用。

总之感谢你的肺腑之言，你的建议我也会认真考虑，希望今后的 zTree 或者 再制作新的插件时能够尽可能让大家使用、学习、扩展都很方便。

1 楼 leocaan 2012-01-18  

您好，ztree非常强大，是我所见过的最好的tree，有些个人建议，敬请斟酌：
1、能否修改或封装成widget插件模型，使用和学习更方便，也易于其他人进行插件集成；
2、能否像jstree一样内部用插件模型，因为ztree太强大，却不是每个功能都需要在特定环境应用的，内部再用功能插件来扩展或重载，各插件还可以在不同文件中，减少不必要的加载；
                                                  [e-mail]
                                           陈栋