快捷導(dǎo)航

jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題

更新時(shí)間：2017年11月29日 17:09:12 作者：ouou009

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。下面通過(guò)本文給大家分享jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題，需要的朋友參考下吧

zTree 簡(jiǎn)介

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

zTree 是開(kāi)源免費(fèi)的軟件（MIT 許可證）。如果您對(duì) zTree 感興趣或者愿意資助 zTree 繼續(xù)發(fā)展下去，可以進(jìn)行捐助。

zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
采用了延遲加載技術(shù)，上萬(wàn)節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數(shù)據(jù)
支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)
支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應(yīng)回調(diào)
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點(diǎn)，還可以多節(jié)點(diǎn)拖拽喲
在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

原始問(wèn)題

//添加結(jié)點(diǎn), 產(chǎn)品和版本
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) {
   //添加產(chǎn)品結(jié)點(diǎn)
pid = 0;
   treeNode = null;
   treelevel = 1;
  } else if (treeNode) {
   //添加版本結(jié)點(diǎn)
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 });
   });
}

原本直接添加子節(jié)點(diǎn)的時(shí)候，如果父節(jié)點(diǎn)沒(méi)有展開(kāi)，會(huì)添加兩個(gè)一樣的子節(jié)點(diǎn)（第一次的時(shí)候）；后來(lái)我對(duì)父節(jié)點(diǎn)是否展開(kāi)進(jìn)行了判斷，但是卻變成了如果父節(jié)點(diǎn)展開(kāi)，會(huì)添加兩個(gè)一樣的子節(jié)點(diǎn)（第一次的時(shí)候），這個(gè)問(wèn)題要怎么解決呢？

辦法一

將

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

問(wèn)題就可以解決了，但是有沒(méi)有優(yōu)化呢？感覺(jué)改后的代碼分類(lèi)太多了

最優(yōu)辦法

貌似不用這么麻煩吧？前兩天回答了類(lèi)似的問(wèn)題。

1、點(diǎn)擊添加子節(jié)點(diǎn)后，就直接 ajax 傳給后臺(tái)保存數(shù)據(jù)，捕獲 success 事件

2、ajax success 時(shí)，利用 treeNode.zAsync 屬性就可以知道此父節(jié)點(diǎn)是否進(jìn)行過(guò)異步加載，如果為 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");

總結(jié)

以上所述是小編給大家介紹的jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: