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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
Track Image Loading效果代码分析
Aug 13 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
全面理解闭包机制
Jul 11 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
解决浏览器会自动填充密码的问题
Apr 28 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 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网页显示各种语法错误
2013/09/23 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Flask框架信号用法实例分析
2018/07/24 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python中dict和set的用法讲解
2019/03/28 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
python 用struct模块解决黏包问题
2020/11/07 Python
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
公务员培训自我鉴定
2014/02/01 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
检讨书之工作不认真
2019/08/14 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS