这次给大家带来jQuery zTree在异步过程中重复添加子节点,处理jQuery zTree在异步过程中重复添加子节点的注意事项有哪些,下面就是实战案例,一起来看一下。
zTree 简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。
zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
原始问题
//添加结点, 产品和版本 function addNode(event) { rMenu.css({ "visibility": "hidden" }); var treeNode = zTree.getSelectedNodes()[0]; var pid; var nodeName; var treelevel; if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { //添加产品结点 pid = 0; treeNode = null; treelevel = 1; } else if (treeNode) { //添加版本结点 pid = treeNode.id; treelevel = 2; } $.post( "AddNode.action", { type: treelevel, id: pid }, function(nodeIdAndName) { var params = /([^\|]+)\|([^\|]+)/.exec(nodeIdAndName); if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) { zTree.expandNode(treeNode, true); } treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); }); }
原本直接添加子节点的时候,如果父节点没有展开,会添加两个一样的子节点(第一次的时候);后来我对父节点是否展开进行了判断,但是却变成了如果父节点展开,会添加两个一样的子节点(第一次的时候),这个问题要怎么解决呢?
办法一
将
if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) { zTree.expandNode(treeNode, true); } treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
改成
if(!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); } else if(treeNode.open) { if(treeNode.isParent) { zTree.reAsyncChildNodes(treeNode, "refresh"); } else { treeNode.isParent=true; zTree.reAsyncChildNodes(treeNode, "refresh"); } } else { zTree.expandNode(treeNode, true); treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); }
问题就可以解决了,但是有没有优化呢?感觉改后的代码分类太多了
最优办法
貌似不用这么麻烦吧?前两天回答了类似的问题。
1、点击添加子节点后,就直接 ajax 传给后台保存数据,捕获 success 事件
2、ajax success 时,利用 treeNode.zAsync 属性就可以知道此父节点是否进行过异步加载,如果为 false 那么直接 reAsyncChildNodes 刷新, 如果为 true 那么利用 addN...
if ((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.zAsync) treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); else zTree.reAsyncChildNodes(treeNode, "refresh");
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
jQuery EasyUI操作折叠面板accordion详细步奏
以上是jQuery zTree在异步过程中重复添加子节点的详细内容。更多信息请关注PHP中文网其他相关文章!