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

• JQuery Tree插件——zTree v3.0 正式版 发布
• jquery树形控件Ztree 使用
• jquery 树形控件 Ztree
• JQuery Tree插件——zTree v2.6正式版发布
• JQuery Tree插件——zTree v2.6 正式版发布(ITeye)

    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 两位朋友的大力协助。 同时也希望大家能一起讨论这个问题。