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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
零基础php编程好学吗
2019/10/11 PHP
js类 from qq
2006/11/13 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
js实现3D旋转相册
2020/08/02 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python向excel中写入数据的方法
2019/05/05 Python
利用python计算时间差(返回天数)
2019/09/07 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
暑期培训班招生方案
2014/08/26 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
培根随笔读书笔记
2015/07/01 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
Python 如何安装Selenium
2021/05/06 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android