免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

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

zyb3514 于 2018-02-25 22:01:28 创建话题
(34)
(0)
举报

需求:

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

扫码关注TE官方微博 扫码关注TE官方微博
js 点击a标签 获取a的自定义属性方法 js中的referrer返回上一页使用介绍 jQuery中的siblings用法实例分析 JavaScript中的getDay()方法使用详解 javascript用函数实现对象的方法 jQuery实现获取form表单内容及绑定数据到form表单操作分析 ShapeType给VML制作模版 JavaScript获取按钮所在form表单id的方法 jQuery实现新消息在网页标题闪烁提示 Python3.6.0+opencv3.3.0人脸检测示例 redis快照模式_动力节点Java学院整理 JavaScript写的一个DIV 弹出网页对话框 python如何实现反向迭代 python实现的udp协议Server和Client代码实例 php中mysql模块部分功能的简单封装 JS的Document属性和方法小结 sqlserver中Case的使用方法(上下篇)第1_2页 ASP.NET MVC基础 confirm的用法示例用于按钮操作时确定是否执行 Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐) 使用JavaScript实现alert的实例代码 Ajax按需读取数据生成下级菜单 比较详细Python正则表达式操作指南(re使用) DW 查找某字符串前的所有字符的正则表达式 jquery动态创建div与input的实例代码 Angular 2应用的8个主要构造块有哪些 JQ图片文件上传之前预览功能的简单实例(分享) webpack+react+antd脚手架优化的方法 Javascript计算二维数组重复值示例代码 javascript密码强度校验代码(两种方法) PHP+JS实现大规模数据提交的方法 分享一个插件实现水珠自动下落效果 Kotlin开发实战之hello world php+mysql数据库查询实例 python实现360的字符显示界面 .NET发布网站详细步骤 Python3中简单的文件操作及两个简单小实例分享 javascript 获取select下拉列表值的代码 redis密码设置、访问权限控制等安全设置 javascript 取小数点后几位几种方法总结 多浏览器css兼容分析小结 centos下如何查看调优apache状态的相关命令 JS、replace利用正则表达式替换SQL所有参数为指定格式的数据 Ubuntu如何安装Xtreme以便用于软件应用的下载 使用GruntJS构建Web程序之合并压缩篇 利用python库在局域网内传输文件的方法 java实现利用String类的简单方法读取xml文件中某个标签中的内容 Objective-C中NSNumber与NSDictionary的用法简介 JS基础系列之正则表达式 使用工具 plsqldev将Excel导入Oracle数据库 javascript检查日期格式的函数[比较全] Python 条件判断的缩写方法 js 覆盖和重载 函数 深入剖析CSS变形transform(3d) 基于Bootstrap的UI扩展 StyleBootstrap 使用Python的turtle模块画图的方法 SQL Server Alwayson创建代理作业的注意事项详解 asp之GetArray提取链接地址,以$Array$分隔的代码 Python中AND、OR的一个使用小技巧 JavaScript将数字转换成大写中文的方法 python 3.5下xadmin的使用及修复源码bug JS代码放在head和body中的区别分析 javascript实现方法调用与方法触发小结 jquery悬浮提示框完整实例 javascript中声明函数的方法及调用函数的返回值 JS中setTimeout的巧妙用法前端函数节流 解析PHP中常见的mongodb查询操作 asp.net基于session实现购物车的方法 vue绑定的点击事件阻止冒泡的实例 ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上) asp.net使用DataGridTree实现下拉树的方法 基于AJAX的分页类实现代码 使用JS中的Replace()方法遇到的问题小结 ie6,ie7,ie8完美支持position fixed的终极解决方案 SqlServer备份数据库的4种方式介绍 jquery 动态增加,减少input表单的简单方法(必看) 十条建议帮你提高Python编程效率 asp #include命令 使用Java进行远程方法调用的几个方案及比较 Javascript代码在页面加载时的执行顺序介绍 使用js在页面中绘制表格核心代码 ASP.NET MVC API 接口验证的示例代码 Python发送http请求解析返回json的实例 招你几教 让你防止电脑辐射 AJAX 图片展示框架56个 提升开发效率第1_2页 canvas 绘制圆形时钟 Python实例分享:快速查找出被挂马的文件 JS+CSS实现可拖动的弹出提示框 asp.net 虚拟主机时常出现MAC验证失败错误之解决方法 Android继承ViewGroup实现Scroll滑动效果的方法示例 AngularJS入门教程之Cookies读写操作示例 Select下拉框模糊查询功能实现代码 解析js中获得父窗口链接getParent方法以及各种打开窗口的方法 JS清除字符串中重复值的实现方法 css3实例教程 一款纯css3实现的环形导航菜单 jQuery实现div浮动层跟随页面滚动效果 Python实现二叉堆 Javascript遍历table中的元素示例代码 Ruby rails 页面跳转(render和redirect_to) php 文本文件的读取效率 AngularJs基本特性解析(一) SQLite数据库管理系统-我所认识的数据库引擎 原来ASP和PHP都是可以删除自身的 php中邮箱地址正则表达式实现与详解 JS可以控制样式的名称写法一览 jQuery中index()方法用法实例 JavaScript判断表单提交时哪个radio按钮被选中的方法 JavaScript实现动态添加Form表单元素的方法示例 vue2实现搜索结果中的搜索关键字高亮的代码 关于存储过程的编写的一些体会 AngularJS操作键值对象类似java的hashmap(填坑小结) php查看当前Session的ID实例 PowerShell小技巧之使用Verb打开程序 JavaScript日期工具类DateUtils定义与用法示例 设计模式中的组合模式在JavaScript程序构建中的使用 Python3编程实现获取阿里云ECS实例及监控的方法 html5弹跳球示例代码 记录集内随机取记录的代码 js获取指定日期前后的日期代码 Ubuntu系统下安装Aircrack-ng bootstrap下拉列表与输入框组结合的样式调整 Python中字典映射类型的学习教程 window.onload和$(function(){})的区别介绍 COM组件中调用JavaScript函数详解及实例 Lua table简明总结 php 修改密码实现代码 Node.js connect ECONNREFUSED错误解决办法 form上传文件后提示保存action的原因及解决方法 jQuery1.6 类型判断实现代码 Python利用QQ邮箱发送邮件的实现方法(分享) javascript之typeof、instanceof操作符使用探讨 使用async await 封装 axios的方法 基于JavaScript 下namespace 功能的简单分析 javascript实现抽奖程序的简单实例 linux下使用lftp的小结(远程服务器备份) iOS 中Swift仿微信添加提示小红点功能(无数字) Js sort排序使用方法 修改jQuery Validation里默认的验证方法 Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法 js数组与字符串常用方法总结 angular2实现统一的http请求头方法 HTML5+Canvas调用手机拍照功能实现图片上传(上) angularjs 页面自适应高度的方法 实战讲解跨站入侵攻击 得到jQuery detach()后节点中的某个值实现代码 linux中sed命令的使用与注意小结 深入解析Backbone.js框架的依赖库Underscore.js的作用 Python多进程库multiprocessing中进程池Pool类的使用详解 linux入侵踪迹隐藏攻略 web服务器iptables配置脚本实现代码 Linux使用Crontab定时访问某个路由地址的方法 通过position定位实现div底端对齐 vue子父组件通信的实现代码 解决docker pull镜像速度慢的问题的方法 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件 jquery获取html元素的绝对位置和相对位置的方法 纯CSS实现的三列布局网页效果实例 Mybatis分页插件的实例详解 由于扩展配置问题而无法提供您请求的页面错误解决方法 ASP.NET设计网络硬盘之下载或在线查看实现代码 java连接mysql数据库 java连接sql server数据库 如何在iphon IOS设备上使用二维码 Jquery解析json数据详解 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 可以读取EXCEL文件的js代码第1_2页 探寻python多线程ctrl+c退出问题解决方案 PHP开发注意事项总结 jquery实现两边飘浮可关闭的对联广告 PHP读取XML格式文件的方法总结 AngularJS 自定义过滤器详解及实例代码 javascript将list转换成树状结构的实例 JS实现身份证输入框的输入效果 学习php设计模式 php实现模板方法模式 jQuery实现html表格动态添加新行的方法 AJAX如何实现无刷新登录功能 Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统 php常用正则函数实例小结 JQuery下关于$.Ready()的分析 CSS实现的中英文双语菜单效果代码 jquery 实时监听输入框值变化的完美方法(必看) 每天一篇javascript学习小结(Boolean对象) 再次谈论Javascript中的this AWS与阿里云服务器在国内使用的简单对比评测 ruby 异常处理 ensure phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别 JavaScript 拖拉缩放效果 jQuery.ajax实现根据不同的Content-Type做出不同的响应 PowerShell中查看当前版本、Windows版本、.NET版本信息的代码 Linux SVN客户端使用以及服务器配置教程 JSP简介 jQuery实现购物车表单自动结算效果实例 JavaScript中判断变量是数组、函数或是对象类型的方法 jquery ajax,ashx,json的用法总结 巧用ajax请求服务器加载数据列表时提示loading的方法 Yii 2.0在Grid中格式化时间方法示例 js实现Select下拉框具有输入功能的方法 jquery中加载图片自适应大小主要实现代码 基于jquery步骤进度条源码分享 关于js的三种使用方式(行内js、内部js、外部js)的程序代码 js自定义方法通过隐藏iframe实现文件下载
java实现附近的人功能 轻量级jQuery倒计时插件.zip 微信小程序源码-蛋糕巧克力电商 springMVC+mybatis+Spring+C3P0+Oracle简单demo搭建下载部署就可以运行 带节假日JS万年历控件代码.zip 基于bootstrap日期选择器插件.zip 新闻博客CSS网页模板.zip 纯CSS3表情图片旋转动画特效.zip SSM框架整合+Maven+通用的MyBaties增删改查实现 【超酷啊】仿迪卡侬运动专业超市触屏版html5手机wap购物网站模板下载.zip ace bootstrap后台管理系统 【PHP源码】SPGM(Simple Picture Gallery Manager) v1.4.7_spgm-1.4.7.zip 黑色简洁CSS网页模板.zip jQuery图片选项卡商品轮播代码.zip 钢铁化工企业css3网页模板.zip jQuery+html5手机导航菜单代码.zip jQuery完美布局平滑滚动.zip jquery幻灯片tabs选项卡.zip jQuery气泡变换图片切换.zip jquery进度条载入特效.zip 扁平大气化妆师网站模板.zip jQuery国际电话输入插件.zip 红色大气冲浪网站模板.zip 【PHP源码】DedeCms v3.1 正式版 Build20070402_dedecms31.zip jQuery可筛选下拉框美化插件.zip jQuery手机购物车商品结算代码.zip 未知大小的图片在已知容器中的垂直居中和水平居中.zip 苹果APP软件企业模板.zip 英国卡车CSS3网站模板.zip css3鼠标滑过图片文字动画特效.zip jQuery扁平垂直下拉菜单.zip jquery贴片倒计时广告.zip jQuery手风琴菜单.zip 学习教育CSS网页模板.zip jQuery射击飞行的鸟特效.zip jQ+HTML5视差滑动幻灯片.zip 时尚品牌展示响应式模板.zip 兼容手机端HTML5企业模板.zip 【PHP源码】帝国网站管理系统(EmpireCMS) v5.1 繁体中文 BIG5 开源版 Bulid 090613_empirecms_5.1os_tc_big5.zip jQuery支持自定义消息提示框代码.zip css3购物车下拉列表.zip css3箭头菜单效果.zip jQuery图片卷轴效果.zip 华谊兄弟首页3D图片轮播效果.zip jquery+css3曲线图.zip 钛媒体wordpress主题.zip SSH开发超市后台管理系统源代码下载,适合入门学习 响应式下拉菜单插件jquery.cbFlyout.zip HTML5 Cancas温度计样式特效.zip js+css3带星期和日期时钟代码.zip jQuery网格布局和列表布局切换特效.zip 艺术设计CSS模板下载.zip Spring Quartz定时作业 jQuery上下弹性切换Tab选项卡.zip 房屋装修方案网站模板.zip 选项卡和图片滚动结合jquery代码.zip jQuery大麦网首页焦点图.zip wp个人工作室new2.0主题.zip 汽车运输公司网站模板.zip jQuery select下拉框美化插件_3.zip jQuery三图排列滑块幻灯片特效.zip html5表单注册进度条提示效果.zip 女性化妆品企业CSS模板.zip jQuery窗帘开关开场特效.zip 【PHP源码】国外PHP百万格子程序汉化版_bwgz.zip 创意雪景拍摄模板下载.zip css3泡泡动画按钮.zip Discuz! x2.5深黑经典模板.zip jQuery+CSS3节点接触形式注册表单.zip 【ASP.NET源码】NetCMS 1.7.0 源码版 Build 081125_netcmssrc.zip jQuery手机端动画切换引擎插件.zip J2EE spring mvc mybatis bootstrap HTML5 后台框架 jQuery鼠标经过文字链接浮动代码.zip jQuery类似播放器焦点图.zip html5+css3图片幻灯片切换代码.zip html5手机登录表单验证代码.zip HTML5 Canvas微信运动折线图特效.zip 一套bootstrap的后台模板源码2 jQuery图片动态逐渐放大切换.zip 草绿色博客html模板下载.zip 蓝色商务营销网站模板.zip 特斯拉汽车公司网站模板.zip wordpress扁平博客主题.zip jQuery焦点图插件Krakatoa.zip 40套OA模板源码下载 div css手机网站login表单特效.zip jQuery+CSS3文字背景按钮.zip jquery+html5网页播放器代码.zip jquery百度图片搜索效果.zip 【ASP.NET源码】水中云友情连接系统源码_shuizhongyunsaiwz.zip jQuery 3D图片切换插件iPresenter.zip jQuery顶部大图定时缩为可关闭代码.zip 带返回顶部jquery浮动客服代码.zip CSS3绿色Loading加载动画特效.zip 仿QQ登录界面 微信小程序源码-小熊日记 jQuery鼠标点击下拉显示信息代码.zip jQuery带文字动画图片轮播代码.zip 【ASP.NET源码】XCMS 内容管理系统 v1.0 Beta_xcmsdemo.zip 【PHP源码】114啦网址导航建站系统 1.12 Build 20090824_114la_v1.12_codepub_000824.zip jQuery模态对话框插件zebra_dialog.zip 可爱的复古风格jQuery UI Theme Retro.zip js缩略图控制大图上下滚动特效.zip wp个人博客Personal2主题.zip jQuery左侧图片+右侧说明焦点图.zip 仿淘宝UI安卓模版 一个关于JSP+servlet+Mysql的企业电子商城项目 MSN频道四屏flash滑动门效果.zip 个人博客html模板下载.zip js抖动美女相册图片放大展示.zip css3动画原理制做的指针时钟.zip 婚礼策划CSS企业模板.zip css3螺旋3D动画.zip PSD分层婚纱模板下载.zip html5 svg交互式3D商场地图特效.zip 【ASP.NET源码】Ftp在线注册管理系统源码_webftp.zip H5调用摄像头读取二维码完整示例(含源码和引用文件,可在手机中直接使用) jQuery QQ表情插件qqFace.zip jQuery多选项卡图片切换.zip SpringMVC4.3+Spring+HIbernate4.3简单数据库实例 亲测可用 html5广告制作插件.zip jQuery图片淡出淡进自动切换.zip 简单实用jQuery返回顶部代码.zip 微信小程序源码-扫雷小游戏 阿里分布式数据库服务实践视频教程 java基于BS结构下的OA流程可视化的研究与实现(源代码+论文) 猎豹浏览器4.0页面滑动jQuery.zip jQuery列表展开折叠特效代码.zip jQuery触屏弹出对话框.zip SpringMVC3.0+Hibernate3.0+jQuery+Mysql实现登录注册(完整版) 交友婚嫁行业网站模板.zip fastdfs与dubbo整合实现分布式服务接口 Bootstrap扁平带浮动标签表单.zip 黑色风格首页滑动不错手机wap企业网站模板下载.zip jQuery鼠标滑过图片上下滑动.zip JAVA基于局域网的聊天室系统(源代码+论文) 多色css3导航菜单jquery特效.zip jQ带Loading进度条焦点图.zip 纯CSS3实现按钮动画效果代码.zip 【ASP.NET源码】诚毅房地产网源码_chengyifangwang.zip 单车骑行运动CSS模板.zip CSS3鼠标悬停动画过渡.zip jQuery柱状进度条百分比代码.zip 小屏商品展示html模板.zip jquery图片自动播放选项卡.zip jQuery动态的文字跳动动画特效.zip 谷歌NEXUS网站菜单.zip SpringMVC+Hibernate+Easyui权限管理系统 jquery图片等比例缩放特效.zip MOZAIC设计风格网站模板.zip css3突出显示动画导航.zip 【ASP.NET源码】恒浪网站整合管理系统OPD综合网站套件_opd(discuz!nt).zip 邮轮旅游公司网站模板.zip 音悦台首页满屏jQuery幻灯片.zip 简洁的用户信息管理系统后台模板 Mac OS X桌面菜单jQuery.zip Html5像素超级玛丽简易版demo 微信小程序 - 超级染色体.zip jQuery全屏相册插件zoomVisualizer.zip 可嵌入图片视频jQuery全屏滑块.zip 7种CSS3鼠标hover图片效果.zip jQ大荧幕文字效果.zip jQuery SVG垂直图标选项卡特效.zip 摄影艺术CSS网页模板.zip 扁平设计风格html5模板.zip 【ASP.NET源码】多层文章管理系统源码_multiarticle.zip jquery古典风格鼠标悬停导航.zip js仿新浪游戏频道导航条.zip 网站内容管理系统 v1.2.1 免费版 old boy-高级架构师 23、架构回顾-10节 【ASP.NET源码】Discuz!NT论坛整合ASP源码及所需组件_dll080504.zip 【ASP.NET源码】ASP.NET2.0+AjaxPro留言本_aspnetajaxpro.zip 仿找法网触屏手机wap法律网站模板.zip 负载均衡+性能优化+分布式网站安全+保障分布式系统稳定大型分布式电商项目实战课程 仿购物车功能(添加、删除、结算、单选、全选商品等功能) jquery智能弹窗提醒.zip jQuery仿途牛网站焦点图代码.zip 狮子动物园管理网站模板.zip IntelliJ IDEA下SpringBoot+Maven+springdata JPA+EasyUI整合实现增删改查及分页入门项目实例 Agile Lite的源码库 【PHP源码】QiuWish AppleShow许愿树 1.5 Beta_qsswish.zip jQuery+CSS3实现彩色网页滚动条.zip Spring Restful 可运行完整项目 【PHP源码】渝海Alexa排名查询工具 v1.4_yh_alexa.zip dialog自制简单拖拽弹框 jQuery缩略图突出圆角焦点图.zip 披萨外卖官方网站模板下载.zip 微信小程序源码-鱼缸表盘系统小程序 外贸公司业务网站模板.zip css3圆形修边tab标签.zip 微信小程序 - 带后台.zip HTML5+CSS手机微信订餐购物车结算模板 工业化学有限公司网站模板.zip Android蓝牙聊天项目 CSS3镜像文字导航菜单动画特效.zip jquery图片列表瀑布流布局代码.zip 运动服装购物网站模板.zip jquery带页码标识焦点图代码.zip servlet api SUN官方网中文版 java 微信H5支付Demo
举报X