jQuery zTree 异步加载添加子节点重复问题
zTree 简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。
- zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
- 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
- 支持 JSON 数据
- 支持静态 和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标(依靠css)
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
- 简单的参数配置实现 灵活多变的功能
原始问题
//添加结点, 产品和版本 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");
总结
以上所述是小编给大家介绍的jQuery zTree 异步加载添加子节点重复问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
这篇文章主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下2017-03-03浅谈jquery选择器 :first与:first-child的区别
下面小编就为大家带来一篇浅谈jquery选择器 :first与:first-child的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11
最新评论