jQuery zTreeが非同期プロセス中に子ノードを繰り返し追加する

今回は、jQuery zTree の非同期処理中の子ノードの繰り返しの追加について説明します。jQuery zTree の非同期処理中の子ノードの繰り返しの追加に対処する際の 注意事項は何ですか。以下は実際的なケースです。見てみましょう。

zツリー紹介 zTree は、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 つ追加されます (1 回目)。親ノードが展開されているかどうかを後で判断しましたが、親ノードが展開されている場合はそうなってしまいました。 2 つの同一の子ノードが (初めて) 追加されます。 この問題を解決するにはどうすればよいですか?

方法 1

れー

rreee

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

最善の方法

そんなに面倒ではなさそうですよね？ 2日前にも同様の質問に回答しました。

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

2. ajax が成功すると、treeNode.zAsync 属性を使用して、親ノードが非同期で読み込まれたかどうかを知ることができます。これが false の場合は、addN...

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

I を使用して直接 reAsyncChildNodes が更新されます。この記事の事例を読んだことがあるはずです。この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery が Webpack を構成する方法

jQuery EasyUI 操作折りたたみパネル アコーディオンの詳細な手順

jQuery 操作リストの兵士が新しい要素を動的に追加します

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