zTreeを非同期でロードすると子ノードの追加が常に繰り返される問題の解決方法

今回は、zTreeが非同期ロードされると子ノードの追加が常に繰り返される問題を解決する方法を紹介します。zTreeが非同期ロードされる場合に子ノードを追加する際に注意すべき点は何ですか? zTreeは、jQueryで実装された多機能な「ツリープラグイン」です。この記事では、jQuery zTree の非同期読み込みで子ノードを追加する際の重複の問題について説明します。必要な方は参考にしてください

zTree の紹介 zTree は多機能な「ツリープラグ」です。 -in」は jQuery によって実装されます。 zTree の最大の利点は、優れたパフォーマンス、柔軟な構成、複数の機能の組み合わせです。

zTree はオープンソースのフリー ソフトウェア (MIT ライセンス) です。 zTree に興味がある場合、または zTree の継続的な開発に資金を提供したい場合は、寄付を行うことができます。

zTree v3.0は機能ごとにコアコードを分割しており、不要なコードをロードする必要がありません
は遅延ロード技術を採用しており、数万のノードを簡単にロードでき、基本的には実現できます。 IE6 でも即時販売
IE、FireFox、Chrome、Opera、Safari およびその他のブラウザと互換性があります
JSON データをサポートします
ノード データの静的および Ajax 非同期読み込みをサポートします
スキン変更/カスタムアイコン(CSSに依存)
非常に柔軟なチェックボックスまたはラジオ選択機能をサポート
さまざまな
• イベント

  応答コールバックを提供

柔軟な編集(追加/削除/変更/チェック)関数を使用すると、ノードを自由にドラッグ アンド ドロップでき、複数のノードをドラッグ アンド ドロップすることもできます
1 ページ内で複数の 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 });
   });
}

元々、子ノードを直接追加する場合、親ノードが展開されていない場合、2つの同一の子ノードが追加されます（初回）。後から親ノードが展開されているかどうかを判断しましたが、親ノードが展開されると、(初めて) 2 つの同一の子ノードが追加されます。

方法1

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

に変更する 問題は解決できますが、最適化はありますか？変更後はコードカテゴリが多すぎる気がします

一番いい方法そんなに面倒じゃなくても良さそうですよね。 2日前にも同様の質問に回答しました。

1. クリックして子ノードを追加した後、ajax をバックグラウンドに直接送信してデータを保存し、成功イベントをキャプチャします。

2. ajax が成功したら、treeNode.zAsync 属性を使用して親ノードかどうかを確認できます。 false の場合は、reAsyncChildNodes を直接更新します。true の場合は、addN...

この記事のケースを読んだ後は、この方法を習得したと思います。情報については、php 中国語 Web サイトの他の関連記事にご注目ください。 推奨読書:

空白スペースに隠された要素を発見する方法

Ajaxがドロップダウンボックスの非リフレッシュリンクを実装する方法

新規を使用しない詳細な構築

jQueryはドロップを実装する-ダウンメニューナビゲーション

以上がzTreeを非同期でロードすると子ノードの追加が常に繰り返される問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。