首页 > web前端 > js教程 > zTree异步加载时添加子节点总是重复怎么解决

zTree异步加载时添加子节点总是重复怎么解决

php中世界最好的语言
发布: 2018-03-15 16:20:41
原创
4437 人浏览过

这次给大家带来zTree异步加载时添加子节点总是重复怎么解决,解决zTree异步加载时添加子节点总是重复的注意事项有哪些,下面就是实战案例,一起来看一下。

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。下面通过本文给大家分享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 实例

  • 简单的参数配置实现 灵活多变的功能

原始问题

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

//添加结点, 产品和版本

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 });

   });

}

登录后复制

原本直接添加子节点的时候,如果父节点没有展开,会添加两个一样的子节点(第一次的时候);后来我对父节点是否展开进行了判断,但是却变成了如果父节点展开,会添加两个一样的子节点(第一次的时候),这个问题要怎么解决呢?

办法一 

1

2

3

4

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 });

登录后复制

改成

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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...

1

2

3

4

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中文网其它相关文章!

推荐阅读:

怎么发掘空白处隐藏元素

Ajax怎么实现下拉框无刷新联动

无new构建详解

jQuery实现下拉菜单导航

以上是zTree异步加载时添加子节点总是重复怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板