首頁 > web前端 > js教程 > zTree非同步載入時新增子節點總是重複怎麼解決

zTree非同步載入時新增子節點總是重複怎麼解決

php中世界最好的语言
發布: 2018-03-15 16:20:41
原創
4432 人瀏覽過

這次帶給大家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 實例

  • 簡單的參數配置實作靈活多變的功能

## 原始問題

//添加结点, 产品和版本
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中文網其它相關文章!

推薦閱讀:

怎麼發掘空白處隱藏元素


Ajax怎麼實作下拉方塊無刷新聯動


無new建置詳解


#jQuery實作下拉選單導覽

以上是zTree非同步載入時新增子節點總是重複怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板