快捷導(dǎo)航

jQuery zTree樹插件動(dòng)態(tài)加載實(shí)例代碼

更新時(shí)間：2017年05月11日 14:32:17 作者：遊龍

這篇文章主要介紹了jQuery zTree樹插件動(dòng)態(tài)加載效果的實(shí)例代碼,需要的朋友可以參考下

需求：

　　由于項(xiàng)目中家譜圖數(shù)據(jù)量超大，而一般加載方式是通過(guò)，頁(yè)面加載時(shí) zTree.init方法進(jìn)行數(shù)據(jù)加載，將所有數(shù)據(jù)一次性加載到頁(yè)面中。而在項(xiàng)目中家譜級(jí)別又非常廣而深，成千上萬(wàn)級(jí)，因此一次加載，完全加載不出來(lái)。于是需要進(jìn)行優(yōu)化為動(dòng)態(tài)加載（增量加載）的方式，以便數(shù)據(jù)加載，提高體驗(yàn)度。

解決斷路：

　　這應(yīng)該好辦，只要找到父節(jié)點(diǎn)單擊事件，然后進(jìn)行數(shù)據(jù)加載，結(jié)點(diǎn)附加即可。時(shí)間緊，任務(wù)重，完全沒(méi)給研究的時(shí)間。只能硬著上，隨便搜索一個(gè)“zTree動(dòng)態(tài)加載”，出是出來(lái)了，標(biāo)題也對(duì)，可里面的代碼根本沒(méi)找到添加結(jié)點(diǎn)一說(shuō)……一邊是需求催，一邊是沒(méi)找到類似。無(wú)語(yǔ)……對(duì)啊，不是有官網(wǎng)，于是把所有api函數(shù)瀏覽一遍，終于發(fā)現(xiàn)一個(gè)叫addNodes的函數(shù)。喜！

控件代碼

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

腳本代碼（實(shí)現(xiàn)結(jié)點(diǎn)展開、單擊事件時(shí)進(jìn)行動(dòng)態(tài)加載）：

<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>

其中后端請(qǐng)求：

　　其中數(shù)據(jù)來(lái)源為請(qǐng)求路徑“/User/NextLeve?userId=xxx”，為返回如下結(jié)構(gòu)的列表的json數(shù)據(jù)（即List<UserNode>類型的.ToJson()數(shù)據(jù)），其中userId可為，為空時(shí)默認(rèn)取當(dāng)前登錄用戶：

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

效果，則實(shí)現(xiàn)為單擊父結(jié)點(diǎn)/展開父結(jié)點(diǎn)時(shí)動(dòng)態(tài)加載子結(jié)點(diǎn)。

以上所述是小編給大家介紹的jQuery zTree樹插件動(dòng)態(tài)加載效果實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: