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

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

zyb3514 于 2018-02-25 22:01:28 创建话题
(32)
(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官方微博
Android实现多个连续带数字圆圈效果 Python算法应用实战之栈详解 mvvm双向绑定机制的原理和实现代码(推荐) Bootstrap模态框插入视频的实现代码 jQuery EasyUi实战教程之布局篇 jsp内置对象及方法详细介绍 12个非常有用的JavaScript技巧 python+selenium实现登录账户后自动点击的示例 js实现n秒倒计时后才可以点击的效果 JS 中LocalStorage和SessionStorage的使用 HTML列表标签dl、ul、ol 的使用示例 JQuery插件ajaxfileupload.js异步上传文件实例 python中日志logging模块的性能及多进程详解 jquery.uploadifive插件怎么解决上传限制图片或文件大小问题 javascript实现数组中的内容随机输出 解决navicat 链接oracle时出现的各种问题 在vue中,v-for的索引index在html中的使用方法 JavaScript学习笔记(一) js基本语法 php通过array_unshift函数添加多个变量到数组前端的方法 在Python的Django框架中用流响应生成CSV文件的教程 jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】 Python实现的文本编辑器功能示例 如何在指定的地方插入html内容和文本内容 Vue2.0 vue-source jsonp 跨域请求 Lua与C语言间的交互实例 Js遍历键值对形式对象或Map形式的方法 java 分布式与集群的区别和联系 vue-cli+webpack记事本项目创建 mysql 5.7.21 winx64绿色版安装配置方法图文教程 asp中静态页面实现方法 jQuery1.6 类型判断实现代码 jqTransform form表单美化插件使用方法 使用ImageMagick进行图片缩放、合成与裁剪(js+python) ASP.NET MVC5网站开发之网站设置(九) javascript求日期差的方法 24款热门实用的jQuery插件推荐 Vue组件和Route的生命周期实例详解 Angular4的输入属性与输出属性实例详解 Android RecyclerView打造悬浮效果的实现代码 jQuery实现美观的多级动画效果菜单代码 解析如何屏蔽php中的phpinfo()函数 JQuery从头学起第三讲 扩展jquery easyui tree的搜索树节点方法(推荐) 详解vue父子组件间传值(props) JS设计模式之策略模式概念与用法分析 jquery+ajax+C#实现无刷新操作数据库数据的简单实例 DotNet2.0 生成网站的测试 Visual Studio 2017新版发布 更强大! jQuery的Scrollify插件实现滑动到页面下一节点 PHP实现的MongoDB数据库操作类分享 .NET装饰模式讲解 php读取torrent种子文件内容的方法(测试可用) thinkphp 手机号和用户名同时登录 ubuntu下安装nodejs以及升级的办法 ASP动态网页制作技术经验分享 js实现改进的仿蓝色论坛导航菜单效果代码 sqlserver服务器验证改为混合验证模式步骤 DedeCMS Error Warning!提示信息的修改方法 详解flask表单提交的两种方式 Bat自动解压缩发布asp.net程序 js技巧之十几行的代码实现vue.watch代码 ASP.NET用户注册实战(第11节) python脚本监控docker容器 用jquery获取自定义的标签属性的值简单实例 mongoDB 实现主从读写分离实现的实例代码 Bootstrap每天必学之进度条 微信小程序 Video API实例详解 Android ViewDragHelper使用介绍 Ubuntu中Source Insight的使用详解 ubuntu如何截图? ubuntu中截屏的三种方法 jQuery插件imgAreaSelect基础讲解 Python实现基于POS算法的区块链 Javascript 基础---Ajax入门必看 Ajax 实现网站劫持的检测方法 HTML实现文本框只读不能修改其中的内容 MySQL实现批量检查表并进行repair与optimize的方法 jQuery获得IE版本不准确webbrowser的解决方法 jQuery版Tab标签切换 CSS字体中英文名称对照表 CSS常用中文字体英文名称对照表 详解Java的Hibernate框架中的set映射集与SortedSet映射 BootStrapTable 单选及取值的实现方法 BootStrap中的表单大全 Python查找相似单词的方法 MAC iMessage以及FaceTime激活出现问题导致激活失败 浅述python中深浅拷贝原理 HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述 LayerClose弹窗关闭刷新方法 jQuery扩展+xml实现表单验证功能的方法 jQuery boxy弹出层插件中文演示及使用讲解 jQuery、layer实现弹出层的打开、关闭功能 iOS 把图片保存到相册,并获取图片文件名的实例 javascript实现拖动元素交换位置 jQuery实现菜单式图片滑动切换 JSP中使用JDBC访问SQL Server 2008数据库示例 详解angularJs模块ui-router之状态嵌套和视图嵌套 Oracle中判断字段是否为数字 JavaScript移除数组元素减少长度的方法 MySQL中参数sql_safe_updates在生产环境的使用详解 thinkphp四种url访问方式详解 基于PHP常用文件函数和目录函数整理 node.js中watch机制详解 jQuery实现html table行Tr的复制、删除、计算功能 js的隐含参数(arguments,callee,caller)使用方法 SQLSERVER Pager store procedure分页存储过程 python numpy格式化打印的实例 15款jQuery分布引导插件分享 asp.net通过配置文件连接Access的方法 ASP返回某年总共有多少天的代码 jQuery EasyUI datagrid实现本地分页的方法 dede后台Fatal error Allowed memory size of 8388608 bytes exhausted问题的解决方 javascript 动态设置已知select的option的value值的代码 Android 中Context的使用方法详解 火狐textarea输入法的bug的触发及解决 Javascript 闭包详解及实例代码 JS求解三元一次方程组值的方法 asp.net 用继承方法实现页面判断session JSP 中Spring组合注解与元注解实例详解 基于使用paramiko执行远程linux主机命令(详解) Shell脚本切割tomcat的日志文件 PHP中错误与异常的日志记录用法分析 Python使用win32 COM实现Excel的写入与保存功能示例 Javascript HTML5 Canvas实现的一个画板 JavaScript中的isXX系列是否继续使用的分析 Python3 能振兴 Python的原因分析 Windows(x86,64bit)升级MySQL 5.7.17免安装版的详细教程 javascript中通过arguments参数伪装方法重载 PHP基础知识回顾 乱象,印迹 正则学习问答 mysql登录警告问题的解决方法 在VirtualBox上安装CentOS7(图文步骤) hovertree插件实现二级树形菜单(简单实用) Python创建xml的方法 jquery css实现邮箱自动补全 JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox) Windows下安装Django框架的方法简明教程 javascript函数声明和函数表达式区别分析 关于javaScript注册click事件传递参数的不成功问题 详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios) Javascript动态创建表格及删除行列的方法 JS实现的简单拖拽购物车功能示例【附源码下载】 不定义JQuery插件 不要说会JQuery php实现插入排序 入门教程 Linux操作系统下串口设置及编程 TP(thinkPHP)框架多层控制器和多级控制器的使用示例 纯js实现仿QQ邮箱弹出确认框 SQL Server SQL高级查询语句小结 将Datatable转化成json发送前台实现思路 js 数组实现一个类似ruby的迭代器 oblog_4.6_SQL 语句 flex内嵌html网页示例代码 Swift心得笔记之字符串 JS异步函数队列功能实例分析 PHP连接MySql闪断自动重连的方法 TensorFlow安装及jupyter notebook配置方法 jQuery EasyUI菜单与按钮详解 详解SQL Server中的数据类型 js实现浮动在网页右侧的简洁QQ在线客服代码 Shell脚本编写Nagios插件监控程序资源占用 Android实现RecyclerView下拉刷新效果 jQuery mobile转换url地址及获取url中目录部分的方法 关于避免MySQL替换逻辑SQL的坑爹操作详解 ubb代码转换为html AngularJS入门教程之ng-class 指令用法 javascript中的 object 和 function小结 jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法 Razor模板引擎简单介绍 js正则查找match()与替换replace()用法实例 Oracle归档日志写满(ora-00257)了怎么办 有关php运算符的知识大全 PHP+MySQL修改记录的方法 JS实现重新加载当前页面或者父页面的几种方法 手机端转盘抽奖代码分享 jquery判断输入密码两次是否相等 jquery模拟LCD 时钟的html文件源代码 php实现两个数组相加的方法 javascript获取form里的表单元素的示例代码 CodeMirror2 IE7_IE8 下面未知运行时错误的解决方法 js实现在文本框光标处添加字符的方法介绍 Linux系统中将Tor的Socks5代理转为HTTP代理的教程 Python中int()函数的用法浅析 javascript 防止刷新,后退,关闭 jquery操作checked属性以及disabled属性的多种方法 学习JavaScript图片预加载模块 js实现图片放大展示效果 使用FSO按文件大小浏览文件目录并进行删除操作 ASP编程入门进阶(九):内置对象Application js 省地市级联选择 JS把内容动态插入到DIV的实现方法 php一行代码获取文件后缀名实例分析 js 遍历json返回的map内容示例代码 ASP.NET MVC文件上传教程(二) asp.net 数据绑定的实例代码 JS原型链怎么理解 Oracle删除archivelog文件的正确方法 NopCommerce架构分析之(六)自定义RazorViewEngine和WebViewPage MySQL的安装以及基本的管理命令和设置 搞笑的程序猿:看看你是哪种Python程序员 JavaScript中的prototype原型学习指南 Linux下JDK中文字体乱码的解决方法 java笔记学习之操作符
jQuery弹出层图片动画查看代码.zip 数码产品销售网站模板.zip jq横向滑动排版效果.zip jQuery表单UI美化特效插件.zip spring+springmvc+hibenate完整例子 【PHP源码】气功猪文章系统修正美化版_pigarticle.zip 蓝色手机应用开发公司模板.zip JSP网页HTML编辑器 v1.0 JS点击弹出模态窗口下拉列表代码.zip CSS3 SVG文字背景动画.zip jquery图片淡入淡出切换特效.zip css3突出显示动画导航.zip jquery动态弹性多级下拉菜单.zip 鲜花摄影Html5网站模板.zip 【ASP.NET源码】闪睿企业网站管理系统 2009 SP1 Build 090828_shanrui.zip ssm框架整合redis 纯CSS3表情图片旋转动画特效.zip jQuery水平滚动条图片切换.zip jQuery纸张切割效果.zip jQuery鼠标点击图片滑动切换特效.zip ImageFilterForAndroid-master几十种图片处理效果 手机卫星定位网站模板.zip html5 canvas雪花动画特效.zip 微信小程序源码-看图识字 简约黑白搭配CSS网站模板.zip jquery.LoadImage图片预加载.zip 酷我音乐首页jQuery焦点图代码.zip css鼠标悬停图片高亮效果.zip Struts 2+Hibernate+Spring实现BBS论坛系统 jQuery平滑旋转幻灯片代码.zip jQuery圆形进度条倒计时插件.zip html5+css3文字翻转动画效果.zip css3实现Metro Icon.zip 纯CSS3实现逼真的翻书效果.zip 家庭医生在线html5响应式触屏版手机wap健康网站模板.zip jquery海信官网带缩略图下拉导航菜单.zip 164个完整的Java代码 jQuery商品发布三级联动菜单代码.zip jquery功能强大的提示信息特效.zip 电子产品百货商城网站模板.zip 报纸网站CSS网页模板.zip flash+xml焦点图切换.zip jQuery酒店预订日历代码.zip JS手机端多图片上传删除代码.zip 功能强大的HTML5滑块幻灯片.zip jQuery错误警告弹出框代码.zip 双鱼林 jsp人事工资系统 【PHP源码】北雨虚拟主机定单系统 v1.0_byhost10.zip Discuz! x2黑色透明风格模板.zip 图书进存销系统 java GUI 界面 mysql 数据库 三层架构 jquery纵向幻灯片选项卡.zip 给图片加相框jquery特效.zip 灰色质感wordpress主题.zip jQuery网页弹出对话框.zip jquery图形多选复选框.zip jQuery垂直可折叠手风琴菜单.zip css3黑色UI按钮.zip 手机端30天内选择预约时间代码.zip 仿幻侠小说网微官网手机wap小说网站模板.zip Discuz! x2花样年华风格模板.zip jquery tab招聘列表选项卡切换.zip 【PHP源码】PHPWind Forums 7.0 BIG5 正式版 Build20090116_phpwind_big5_7.0.zip 【ASP.NET源码】娱大妈文章管理系统 v2.2 (C9静态文章核心)_ym2.2.zip html5 3d宽屏幻灯片代码.zip ssm框架搭建的demo,非常简洁 android拍照,相册选择多图上传图像demo 中国银联全渠道支付平台--银联二维码支付之主扫、被扫、查询接口 害虫动物HTML5网站模板.zip jQuery可上传文件跟图片的插件.zip JS鼠标右键上下文菜单配置插件.zip angularjs中ui.router和ngRouter模块的用法 CSS3实现带动画的天气图标代码.zip HTML5响应式导航.zip JSP+SERVLET+MYSQL实现的权限管理,学生宿舍管理系统 jQuery图片tooltip提示.zip 基于jQuery可爱T恤展开特效.zip CSS3左侧图标菜单点击全屏切换代码.zip 音乐炫彩背景网页模板.zip jQuery鼠标右击显示菜单代码.zip tourex 6.0 高级版 旅游管理系统 仅供研究学习 discuzX2.5木板风格.zip 【ASP.NET源码】简单多用户Blog源码_simpleusersblog.zip 大气的jQuery树型时间轴特效.zip 手机游戏门户网站模板.zip jQuery彩色带图标Tabs选项卡代码.zip Android 天气预报、http、sqlite、存储、服务、定时器、广播 基于SVG实现Loading加载按钮代码.zip 基于内容的推荐系统的源码和论文 java百度地图瓦片批量下载demo 微信小程序 - 变态方块小游戏.zip jquery链接URL截图预览.zip 二手车交易市场网站模板.zip 投资企业CSS3网站模板.zip SpringMVC+Mybits简单项目,初学者可供参考 风景图片大全网站模板.zip CSS3+SVG实现时间沙漏特效下载.zip 鼠标响应文字跳动jquery插件.zip jquery伸缩拖拽弹出框.zip 计程车企业网站模板.zip 吃货联盟订餐系统 红色扁平HTML5美食模板.zip jdbc连接Oracle数据库实现学生管理系统(数据库连接池实现多用户操作同一数据库) 灵智电子政务网站系统 蓝色宽屏旅行网站模板.zip js不同设备过渡切换效果.zip HTML5发光Loading动画.zip HTML5柱状图表.zip jQuery电影背景画面对比滑块代码.zip 9款过度效果jquery焦点图.zip 电子商务html模板下载.zip jquery+css3点击触发循环高亮显示.zip 煤矿安全实时监控系统 (简单新闻发布系统) 简单jquery鼠标跟随左侧浮动菜单.zip 用CSS做的图片滚动下拉效果.zip jQuery动画二级下拉菜单代码.zip 国外餐饮披萨美食网页模板.zip html5 svg手机播放器按钮动画特效.zip 铜师傅官网ecshop模板.zip jQuery阶梯动画导航条.zip 【ASP.NET源码】YxShop易想购物商城系统 v4.3.1 bulid 090515 源码版_changehope_b2c_4.zip 18款anime.js文字动画特效.zip jQuery鼠标滚动控制全屏页面滚动.zip html5背景图片自适应代码.zip 写入cookie后只显示一次的DIV提示框代码.zip 【ASP.NET源码】iwms v5.0.1010 正式版 .Net1.0_iwms_1.1.zip jQuery仿杀毒软件自动检测代码.zip 投资银行业务网页模板.zip jQuery隐藏收缩在线客服.zip 葡萄酒高端主题CSS模板.zip jQuery图片选中突出标签幻灯片代码.zip 品牌手表html5绿色模板.zip APP开发制作公司网站模板.zip 【ASP.NET源码】asp.net版ucenter接口程序源码_ucenterapi.zip zxing和QRcode两种方式实现的带logo的二维码 游戏评测HTML5网站模板.zip 微信小程序源码-投资理财 适合产品销售页面CSS3定价表.zip ssm后台管理系统框架(Spring mvc + mybatis + mysql + easyui ) HTML5 Cancas温度计样式特效.zip 沙发家具公司网页模板.zip jQuery select下拉菜单.zip 微信小程序 - 一笔画.zip jquery新闻选项卡滑动效果.zip jQuery密码强度检测高级版代码.zip jquery animate分页按钮.zip css3圆形修边按钮.zip jQuery上下滑动选项卡切换代码.zip DrupalCMS B7.zip CSS3深色滑动单页模板下载.zip jQuery多功能垂直幻灯片.zip 微信小程序源码-IT-EBOOK jQuery乐蜂网明星滑动列表.zip 【ASP.NET源码】资料管理系统源码_filemanagesystem.zip spring+springMVC+Mybatis+MYSQL+Redis+Maven项目整合源码 jQuery创意字体特效.zip HTML后台权限管理模板源码下载 红色大气音乐网站模板.zip 自定义一个简单的segmentController 微信小程序源码-教育一号 ASP,NET分享到新浪微博微信实例代码 HTML5开心消消乐小游戏 纯CSS3仿窗帘拉开关闭动画特效.zip JSP无限级分类目录树 【ASP.NET源码】学生成绩管理系统源码(附论文)_gradesystem.zip xml格式数据和json相互转换的源码 jQuery手势密码特效.zip 建党九十周年庆典PSD.zip 水果沙拉餐厅网站模板.zip 信息管理系统 SSM+Bootstrap实现 微信小程序源码-化妆品商城 jquery多图层叠展示效果.zip jQuery+CSS3页面预加载动画特效.zip 【PHP源码】漂亮的全站程序-JOYS的小窝_free5.zip jQuery鼠标滑过超链接动画特效.zip bootstrap各种布局模板(html文件) 春天蔓藤海报素材下载.zip HTML5 SVG区域线图表.zip Bootstrap3扁平垂直手风琴代码.zip 微信小程序 - 茶叶商城(含后端).zip jQuery模拟键盘打字插件typetype.zip 花店网站CSS网页模板.zip jQuery鼠标拖动图片摇晃特效.zip BUI强大的bootstrap后台开发框架,UI 样例丰富 Discuz! x2.5时尚生活模板.zip 带操作记录jQuery计算器.zip 流畅度非常好的jQ图片切换代码.zip jquery+css3滑动头像.zip jquery仿wp动画悬浮标签云插件.zip spring security demo jQuery黑色网站导航下拉菜单代码.zip jQuery支持删除重新选择表单代码.zip Android应用源码安卓与PC的Socket通信项目 js四屏带缩略图响应幻灯片.zip 【PHP源码】Phpcms网站管理系统 2007 SP6 简体中文UTF-8版 Build 20080826_phpcms2007_sp6_gbk.zip 弹性拖动交互切换特效.zip 圣诞节雪花飘落jQuery特效.zip jQuery鼠标双击图片加入小框代码.zip jQuery翻转倒计时定时器插件.zip jquery下拉选择城市插件hhDrop.zip CSS3手势变换动画特效.zip
举报X