jQuery zTree树插件动态加载实例代码

需求：

　　由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深，成千上万级，因此一次加载，完全加载不出来。于是需要进行优化为动态加载（增量加载）的方式，以便数据加载，提高体验度。

解决断路：

　　这应该好办，只要找到父节点单击事件，然后进行数据加载，结点附加即可。时间紧，任务重，完全没给研究的时间。只能硬着上，随便搜索一个“zTree动态加载”，出是出来了，标题也对，可里面的代码根本没找到添加结点一说……一边是需求催，一边是没找到类似。无语……对啊，不是有官网，于是把所有api函数浏览一遍，终于发现一个叫addNodes的函数。喜！

控件代码

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

脚本代码（实现结点展开、单击事件时进行动态加载）：

<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树插件动态加载效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# ztree树插件动态加载  # 基于jQuery ztree实现表格风格的树状结构  # jQuery zTree 异步加载添加子节点重复问题  # jQuery 利用ztree实现树形表格的实例代码  # zTree jQuery 树插件的使用(实例讲解)  # jQuery使用zTree插件实现可拖拽的树示例  # jQuery EasyUI结合zTree树形结构制作web页面  # jQuery插件zTree实现的多选树效果示例  # jQuery zTree如何改变指定节点文本样式  # 加载  # 单击  # 小编  # 是有  # 在此  # 而在  # 一遍  # 给大家  # 一说  # 一个叫  # 也对  # 可为  # 对啊  # 所述  # 给我留言  # 官网  # 感谢大家  # 为空  # 没给  # 后端 

相关文章： 赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  如何通过cPanel快速搭建网站？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  如何正确选择百度移动适配建站域名？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  重庆网站制作公司哪家好,重庆中考招生办官方网站？    Python文件管理规范_工程实践说明【指导】  网站按钮制作软件,如何实现网页中按钮的自动点击？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  如何规划企业建站流程的关键步骤？  建站之星好吗？新手能否轻松上手建站？  如何访问已购建站主机并解决登录问题？  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  微课制作网站有哪些,微课网怎么进？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  ,想在网上投简历，哪几个网站比较好？  官网网站制作腾讯审核要多久,联想路由器newifi官网  外贸公司网站制作哪家好,maersk船公司官网？  如何通过商城免费建站系统源码自定义网站主题？  如何快速生成ASP一键建站模板并优化安全性？  Java解压缩zip - 解压缩多个文件或文件夹实例  手机网站制作与建设方案,手机网站如何建设？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  南宁网站建设制作定制,南宁网站建设可以定制吗？  图册素材网站设计制作软件,图册的导出方式有几种？  简单实现Android验证码  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  建站之星如何取消后台验证码生成？  如何挑选优质建站一级代理提升网站排名？  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  如何在阿里云域名上完成建站全流程？  内网网站制作软件,内网的网站如何发布到外网？  如何快速搭建虚拟主机网站？新手必看指南  定制建站策划方案_专业建站与网站建设方案一站式指南  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  佛山企业网站制作公司有哪些,沟通100网上服务官网？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  如何做网站制作流程,*游戏网站怎么搭建？  建站之星如何快速更换网站模板？  如何续费美橙建站之星域名及服务？  linux top下的 minerd 木马清除方法  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  上海网站制作开发公司,上海买房比较好的网站有哪些？  智能起名网站制作软件有哪些,制作logo的软件？  无锡营销型网站制作公司,无锡网选车牌流程？  建站之星后台密码遗忘或太弱？如何重置与强化？