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

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

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

zTree 簡介

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

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

zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
采用了延遲加載技術(shù)，上萬節(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è)頁面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
簡單的參數(shù)配置實(shí)現(xià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)沒有展開，會添加兩個(gè)一樣的子節(jié)點(diǎn)（第一次的時(shí)候）；后來我對父節(jié)點(diǎn)是否展開進(jìn)行了判斷，但是卻變成了如果父節(jié)點(diǎn)展開，會添加兩個(gè)一樣的子節(jié)點(diǎn)（第一次的時(shí)候），這個(gè)問題要怎么解決呢？

辦法一

將

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

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

最優(yōu)辦法

貌似不用這么麻煩吧？前兩天回答了類似的問題。

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

2、ajax success 時(shí)，利用 treeNode.zAsync 屬性就可以知道此父節(jié)點(diǎn)是否進(jìn)行過異步加載，如果為 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ù)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: