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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
JS实现九宫格拼图游戏
Jun 28 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
西德产收音机
2021/03/01 无线电
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
前端性能优化及技巧
2016/05/06 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
利用python获取Ping结果示例代码
2017/07/06 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
如何用python整理附件
2018/05/13 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python super()方法原理详解
2020/03/31 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
德国网上药房:Apotal
2017/04/04 全球购物
运动会广播稿80字
2014/01/23 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
企业公益活动策划方案
2014/08/24 职场文书
小学生运动会报道稿
2014/09/12 职场文书
产品委托授权书范本
2014/09/16 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android