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


Posted in jQuery onMay 11, 2017

需求:

由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 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树插件动态加载效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
You might like
使用php实现截取指定长度
2013/08/06 PHP
初识laravel5
2015/03/02 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
使用Apache的rewrite
2021/03/09 Servers
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Python入门篇之字典
2014/10/17 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
基于Python实现简单学生管理系统
2020/07/24 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
运动会入场解说词300字
2014/01/25 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
招聘专员岗位职责
2014/03/07 职场文书
洗发水广告词
2014/03/13 职场文书
创业女性典型材料
2014/05/02 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
生日答谢词
2015/01/05 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书