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

一、应用场景

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

二、项目实践

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

三、代码实现

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

2、刷新方法

获取 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"),nodes = zTree.getSelectedNodes(); /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/ var parentNode = zTree.getNodeByTId(nodes[0].parentTId); /*选中指定节点*/ zTree.selectNode(parentNode); zTree.reAsyncChildNodes(parentNode,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. 获取当前被选中的节点数据集合

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

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

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

方法实例：

1. 获取 tId = "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. 重新异步加载当前选中的第一个节点

0) { treeObj.reAsyncChildNodes(nodes[0],"refresh"); }

4、部分后台代码

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

2、

loadNodesByID(Integer id) { /* 查询工程集合 */ List allProjects = this.cuProjectDAO.findAllProjects(); Map> allPorjectList = this.buildProjectVOMap(allProjects); /* 查询脚本集合 */ List allScripts = this.cuScriptDAO.findAllScripts(); Map> allScriptMap = this.buildScriptVOMap(allScripts); /* 构建ZTreeNode数据结构 */ List treeNodeList = new ArrayList(); loopBuildZTree(id,allPorjectList,allScriptMap,treeNodeList); return treeNodeList; }

以上所述是小编给大家介绍的zTree实现节点修改的实时刷新功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/js/40574.html

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

一、应用场景

二、项目实践

三、代码实现

猜你在找的JavaScript相关文章