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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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面向对象概念
2011/11/06 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
python字典DICT类型合并详解
2017/08/17 Python
python使用KNN算法手写体识别
2018/02/01 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python hook监听事件详解
2018/10/25 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python开启debug模式的方法
2019/06/27 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
护士自荐信
2013/10/25 职场文书
自我评价怎么写正确呢?
2013/12/02 职场文书
入党积极分子介绍信
2014/01/17 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
建设投标担保书
2014/05/13 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python