当前位置:Gxlcms > JavaScript > jQueryzTree树插件动态加载

jQueryzTree树插件动态加载

时间:2021-07-01 10:21:17 帮助过:18人阅读

本文主要介绍了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<UserNode>类型的.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树插件动态加载的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行