jQuery zTree ツリープラグインの動的読み込み-jsチュートリアル-php.cn

jQuery zTree ツリープラグインの動的読み込み

小云云

リリース： 2018-01-12 09:53:19

オリジナル

1410 人が閲覧しました

この記事では主に jQuery zTree ツリープラグインの動的読み込み効果のサンプルコードを紹介します。必要な方は参考にしていただければ幸いです。

要件:

プロジェクト内の家系図データの量が非常に多いため、一般的な読み込み方法は、ページの読み込み時に zTree.init メソッドを通じてデータを読み込み、次の時点ですべてのデータをページに読み込みます。一度。このプロジェクトでは、家系図のレベルは非常に広く深く、数万のレベルがあるため、一度ロードするとまったくロードすることはできません。したがって、データの読み込みを容易にし、エクスペリエンスを向上させるために、動的読み込み (増分読み込み) 方法を最適化する必要があります。

サーキットブレークを解決します:

これは簡単に処理できます。親ノードのクリックイベントを見つけて、データをロードし、ノードをアタッチするだけです。時間は限られており、タスクは多く、研究する時間がまったくありませんでした。ボタンを押して「zTree 動的読み込み」を検索することしかできませんでした。結果は表示され、タイトルは正しかったのですが、内部のコードにはノードの追加に関するものが見つかりませんでした。一方で、要求に応じてプロンプトが表示されました。 , しかし一方で、同様のものは見つかりませんでした。無言… はい、公式 Web サイトがないので、すべての API 関数を参照して、最終的に addNodes という関数を見つけました。幸せ！

制御コード

<p class="UserTree">
  <ul id="treeDemo" class="ztree"></ul>
</p>

ログイン後にコピー

スクリプトコード(イベントクリック時のノード展開と動的読み込みの実装):

<script>
  var zNodes;
  var zTree;
  $(function () {
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      async: false,
      success: function (data) {
        zNodes = data;
      },
      error: function (data) {
        alert("error");
      }
    });
    zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);
    zTree.expandAll(false);
  })
  var setting = {
    view: {
      nameIsHTML: true
    },
    data: {
      simpleData: {
        enable: true
      },
      keep: {
        parent: true
      }
    },
    open: false,
    callback: {
      onClick: nodeClick,
      onExpand: function (event, treeId, treeNode) {
        addSubNode(treeNode);
      }
    }
  };
  function showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
  };
  function searchM() {
    var username = $("#txtName").val()
  }
  function nodeClick(event, treeId, treeNode, clickFlag) {
    addSubNode(treeNode);
  }
  function addSubNode(treeNode) {
    if (!treeNode.isParent) return;
    var s = treeNode.children;
    if (s != undefined)
      return;
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      data: { userId: treeNode.id },
      async: true,
      success: function (data) {
        zTree.addNodes(treeNode, data);
      },
      error: function (data) {
        alert("error");
      }
    });
  }
</script>

ログイン後にコピー

バックエンドリクエスト:

データソースはリクエストパス「/User/NextLeve?userId=xxx」で、次の構造を持つリストの json データ (つまり、List タイプの .ToJson() データ)。 userId を指定でき、空の場合は、デフォルトで現在ログインしているユーザーが取得されます。

この効果は、親ノードをクリックするか、親ノードを展開するときに子ノードを動的にロードすることで実装されます。