jQuery zTree樹插件動態載入

本文主要介紹了jQuery zTree樹插件動態載入效果的實例程式碼,需要的朋友可以參考下，希望能幫助大家更好理解zTree功能。

需求：

　　由於專案中家譜圖資料量超大，而一般加載方式是通過，頁面加載時zTree.init方法進行資料加載，將所有資料一次加載到頁面中。而在專案中家譜等級又非常廣而深，成千上萬級，因此一次加載，完全加載不出來。於是需要進行最佳化為動態加載（增量加載）的方式，以便資料加載，提高體驗度。

解決斷路：

　　這應該好辦，只要找到父節點點擊事件，然後進行資料加載，結點附加即可。時間緊，任務重，完全沒給研究的時間。只能硬著上，隨便搜尋一個“zTree動態載入”，出是出來了，標題也對，可裡面的程式碼根本沒找到添加結點一說…一邊是需求催，一邊是沒找到類似。無言……對啊，不是有官網，於是把所有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可為，為空時預設取目前登入使用者：

public class UserNode
{
  public long id { get; set; }
  public long pId { get; set; }
  public string name { get; set; }
  public bool open { get; set; }
  public bool isParent { get; set; }
  public string icon { get; set; }
}

效果，則實作為點選父結點/展開父結點時動態載入子結點。

相關推薦：

jQuery中zTree樹外掛程式使用分享

實例詳解jQuery EasyUI結合zTree樹狀結構製作web頁面

實例講解jQuery使用zTree外掛程式實作可拖曳功能

#

以上是jQuery zTree樹插件動態載入的詳細內容。更多資訊請關注PHP中文網其他相關文章！