Jquery zTree 树控件异步加载操作


Posted in Javascript onFebruary 25, 2016

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等浏览器
  • 在一个页面内可同时生成多个 Tree 实例
  • 支持 JSON 数据
  • 支持一次性静态生成 和 Ajax 异步加载 两种方式
  • 支持多种事件响应及反馈
  • 支持 Tree 的节点移动、编辑、删除
  • 支持任意更换皮肤 / 个性化图标(依靠css)
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 简单的参数配置实现 灵活多变的功能

Jquery zTree 树控件异步加载操作

异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载。

这里面主要设计ztree的setting变量的async属性设置:

var setting = {
 async: {
  enable: true,
  url:InitServiceIpsData.action,
  autoParam:[id, name],
  dataFilter: filter 
 },

当点击展开树节点时,会请求url指定的action获取子节点数据,然后绑定到ztree上。

注意这里后台action返回的是JSON字符串,而ztree绑定新的节点数据只接收数组,所以需要在绑定前用filter函数进行数据清洗转换操作,将字符串转换为数组:

//过滤异步加载ztree时返回的数据 
 function filter(treeId, parentNode, childNodes) {
 if (!childNodes) 
  return null; 
 childNodes = eval((+childNodes+)); //必须转换为[{id:103,pId:1,name:'子节点3'}];这样的格式 
 return childNodes;
 }

这样点击展开ztree树节点时,就会请求action获取子节点数据并绑定了。 

下面是后台action的一个实现:

public String InitServiceIpsData()
 {
 HttpServletRequest request = ServletActionContext.getRequest();
 String id = request.getParameter(id);
 String name = request.getParameter(name);
 System.out.println(请求获取+name+的ip列表);
  
 List<hashmap<string,object>> list = new ArrayList<hashmap<string,object>>();  
 for(int i = 1; i <= 2; i++){ 
  HashMap<string,object> hm = new HashMap<string,object>();  
  hm.put(id, id + 0 + i);
  hm.put(pId, id);
  hm.put(name, name + _IP_ + i);
  hm.put(isParent, false);
  list.add(hm);
 } 
  
 JSONArray finalJson = JSONArray.fromObject(list);
 this.initServiceIpsData = finalJson.toString();
 return SUCCESS;
 }</string,object></string,object></hashmap<string,object></hashmap<string,object>

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》

以上就是Jquery zTree 树控件实现异步加载操作的详细步骤,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 #Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 #Javascript
You might like
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python文件操作整理汇总
2014/10/21 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
python操作链表的示例代码
2020/09/27 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
捐书活动倡议书
2015/04/27 职场文书
酒店员工管理制度
2015/08/05 职场文书
食品安全主题班会
2015/08/13 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
人民币符号
2022/02/17 杂记