登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery zTree树插件动态加载

小云云
发布: 2018-01-12 09:53:19
原创
1170人浏览过

本文主要介绍了jquery ztree树插件动态加载效果的实例代码,需要的朋友可以参考下,希望能帮助大家更好理解ztree功能。

需求:

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

解决断路:

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

控件代码

<p>
  </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中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    相关标签:
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号