zTree实现节点修改的实时刷新功能


Posted in Javascript onMarch 20, 2017

一、应用场景

在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。

二、项目实践

zTree实现节点修改的实时刷新功能

比如要在test1234节点下新建子节点,首先要选中test1234节点,添加成功后,根据test1234结点的TID去后台请求对应子节点数据,实现动态刷新。删除节点类似。

三、代码实现

1、初始化时必须设置配置

<span style="font-size:14px;"> async:{ 
   enable:true, 
   url:"../admin/scriptManager/loadNodeByID.htm", 
   autoParam:["id"], 
   dataType:"json", 
  }, 
  view: { 
   selectedMulti: false 
  } 
 }</span>

2、刷新方法 

/** 
  * 刷新当前节点 
  */ 
 function refreshNode() { 
  /*根据 treeId 获取 zTree 对象*/ 
  var zTree = $.fn.zTree.getZTreeObj("scriptTree"), 
  type = "refresh", 
  silent = false, 
  /*获取 zTree 当前被选中的节点数据集合*/ 
  nodes = zTree.getSelectedNodes(); 
  /*强行异步加载父节点的子节点。[setting.async.enable = true 时有效]*/ 
  zTree.reAsyncChildNodes(nodes[0], type, silent); 
 } 
 /** 
  * 刷新当前选择节点的父节点 
  */ 
 function refreshParentNode() { 
  var zTree = $.fn.zTree.getZTreeObj("scriptTree"), 
  type = "refresh", 
  silent = false, 
  nodes = zTree.getSelectedNodes(); 
  /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/ 
  var parentNode = zTree.getNodeByTId(nodes[0].parentTId); 
  /*选中指定节点*/ 
  zTree.selectNode(parentNode); 
  zTree.reAsyncChildNodes(parentNode, type, silent); 
 }

3、涉及的方法详解

1、$.fn.zTree.init(obj,zSetting,zNodes)zTree的初始化方法,创建zTree必须使用此方法

参数说明

obj JQuery Object用于展现zTree的DOM容器

zSetting   JSON zTree的配置数据,具体请参考 “setting 配置详解”中的各个属性详细说明

zNodes   Array(JSON)/JSON zTree的节点数据,具体请参考 “treeNode 节点数据详解”中的各个属性详细说明

返回值

zTree对象,提供操作zTree的各种方法,对于通过js操作zTree来说必须通过此对象

如果不需要自行设定全局变量保存,可以利用

2、zTreeObj.getSelectedNodes获取 zTree 当前被选中的节点数据集合

返回值

返回值 Array(JSON)当前被选中的节点数据集合

方法实例:

1. 获取当前被选中的节点数据集合

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();

3、zTreeObj.getNodeByTId根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象

参数:tId   String 节点在 zTree 内的唯一标识 tId

返回值:返回值   JSON tId 对应的节点 JSON 数据对象如无结果,返回 null

方法实例:

1. 获取 tId = "tree_10" 的节点数据

var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByTId("tree_10");

4、zTreeObj.selectNode选中指定节点

参数:treeNode   JSON 需要被选中的节点数据

addFlag   Boolean

addFlag = true 表示追加选中,会出现多点同时被选中的情况

addFlag = false 表示单独选中,原先被选中的节点会被取消选中状态

setting.view.selectedMulti = false 时,此参数无效,始终进行单独选中

5、zTreeObj.reAsyncChildNodes强行异步加载父节点的子节点。[setting.async.enable = true 时有效]

参数:parentNode   JSON 指定需要异步加载的父节点 JSON 数据,

reloadType   String reloadType = "refresh" 表示清空后重新加载。reloadType != "refresh" 时,表示追加子节点处理
isSilent   Boolean 设定异步加载后是否自动展开父节点。isSilent = true 时,不展开父节点,其他值或缺省状态都自动展开。

方法实例

1. 重新异步加载当前选中的第一个节点

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
treeObj.reAsyncChildNodes(nodes[0], "refresh");
}

4、部分后台代码

/** 
* 查询工程对象 
* 
* @return 
*/ 
@ResponseBody 
@RequestMapping("/loadNodeByID.htm") 
public List<ZTreeNode> loadNodeByID(Integer id) { 
 List<ZTreeNode> nodes = cuScriptProjectService.loadNodesByID(id); 
 // ZTreeNode zTreeNode = cuScriptProjectService.loadNodeByID(id); 
 return nodes; 
}

2、

/** 
 * 根据工程ID加载工程节点数据 
*/ 
@Override 
public List<ZTreeNode> loadNodesByID(Integer id) { 
 /* 查询工程集合 */ 
 List<CUProject> allProjects = this.cuProjectDAO.findAllProjects(); 
 Map<Integer, List<CUProjectVO>> allPorjectList = this.buildProjectVOMap(allProjects); 
 /* 查询脚本集合 */ 
 List<CUScript> allScripts = this.cuScriptDAO.findAllScripts(); 
 Map<Integer, List<CUScriptVO>> allScriptMap = this.buildScriptVOMap(allScripts); 
 /* 构建ZTreeNode数据结构 */ 
 List<ZTreeNode> treeNodeList = new ArrayList<ZTreeNode>(); 
 loopBuildZTree(id, allPorjectList, allScriptMap, treeNodeList); 
 return treeNodeList; 
}

以上所述是小编给大家介绍的zTree实现节点修改的实时刷新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python global和nonlocal用法解析
2020/02/03 Python
python实现人机五子棋
2020/03/25 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
如何做好总经理助理
2013/11/12 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python面向对象之内置函数相关知识总结
2021/06/24 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android