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中==与===操作符的比较
Mar 21 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
如何制作自己的原生JavaScript路由
May 05 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中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js的回调函数详解
2015/01/05 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
jquery replace方法去空格
2017/05/08 jQuery
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
个人委托书如何写
2014/09/25 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
创先争优活动个人总结
2015/03/04 职场文书
银行催款通知书
2015/04/17 职场文书
警示教育观后感
2015/06/17 职场文书
防溺水主题班会教案
2015/08/12 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
保姆聘用合同
2015/09/21 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers