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动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery实现轮播图特效
Apr 12 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
js命名空间写法示例
2015/12/18 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
快速使用node.js进行web开发详解
2017/04/26 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
基于python实现雪花算法过程详解
2019/11/16 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
课程设计心得体会
2013/12/28 职场文书
大学生党课思想汇报
2013/12/29 职场文书
学生党支部先进事迹
2014/02/04 职场文书
趣味活动策划方案
2014/02/08 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
垂直极限观后感
2015/06/08 职场文书
golang import自定义包方式
2021/04/29 Golang
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis