一、应用场景

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

二、项目实践

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

三、代码实现

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

[javascript] view plain copy
  1. <span style="font-size:14px;"> async:{
  2. enable:true,
  3. url:"../admin/scriptManager/loadNodeByID.htm",
  4. autoParam:["id"],
  5. dataType:"json",
  6. },
  7. view: {
  8. selectedMulti: false
  9. }
  10. }</span>

2、刷新方法

[javascript] view plain copy
  1. 2、刷新方法
  2. /**
  3. * 刷新当前节点
  4. */
  5. function refreshNode() {
  6. /*根据 treeId 获取 zTree 对象*/
  7. var zTree = $.fn.zTree.getZTreeObj("scriptTree"),
  8. type = "refresh",
  9. silent = false,
  10. /*获取 zTree 当前被选中的节点数据集合*/
  11. nodes = zTree.getSelectedNodes();
  12. /*强行异步加载父节点的子节点。[setting.async.enable = true 时有效]*/
  13. zTree.reAsyncChildNodes(nodes[0], type, silent);
  14. }
  15. /**
  16. * 刷新当前选择节点的父节点
  17. */
  18. function refreshParentNode() {
  19. var zTree = $.fn.zTree.getZTreeObj("scriptTree"),
  20. type = "refresh",
  21. silent = false,
  22. nodes = zTree.getSelectedNodes();
  23. /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/
  24. var parentNode = zTree.getNodeByTId(nodes[0].parentTId);
  25. /*选中指定节点*/
  26. zTree.selectNode(parentNode);
  27. zTree.reAsyncChildNodes(parentNode, type, silent);
  28. }

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、部分后台代码

[java] view plain copy
  1. /**
  2. * 查询工程对象
  3. *
  4. * @return
  5. */
  6. @ResponseBody
  7. @RequestMapping("/loadNodeByID.htm")
  8. public List<ZTreeNode> loadNodeByID(Integer id) {
  9. List<ZTreeNode> nodes = cuScriptProjectService.loadNodesByID(id);
  10. // ZTreeNode zTreeNode = cuScriptProjectService.loadNodeByID(id);
  11. return nodes;
  12. }

2、
[java] view plain copy
  1. /**
  2. * 根据工程ID加载工程节点数据
  3. */
  4. @Override
  5. public List<ZTreeNode> loadNodesByID(Integer id) {
  6. /* 查询工程集合 */
  7. List<CUProject> allProjects = this.cuProjectDAO.findAllProjects();
  8. Map<Integer, List<CUProjectVO>> allPorjectList = this.buildProjectVOMap(allProjects);
  9. /* 查询脚本集合 */
  10. List<CUScript> allScripts = this.cuScriptDAO.findAllScripts();
  11. Map<Integer, List<CUScriptVO>> allScriptMap = this.buildScriptVOMap(allScripts);
  12. /* 构建ZTreeNode数据结构 */
  13. List<ZTreeNode> treeNodeList = new ArrayList<ZTreeNode>();
  14. loopBuildZTree(id, allPorjectList, allScriptMap, treeNodeList);
  15. return treeNodeList;
  16. }

转载于:https://www.cnblogs.com/remember-forget/p/8461212.html

zTree实现节点修改的实时刷新相关推荐

  1. SrpingCloud 之SrpingCloud config分布式配置中心实时刷新

    默认情况下是不能及时获取变更的配置文件信息 Spring Cloud分布式配置中心可以采用手动或者自动刷新 1.手动需要人工调用接口   监控中心 2.消息总线实时通知  springbus 动态刷新 ...

  2. webpack-dev-server 搭建本地服务以及浏览器实时刷新

    一.概述 开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要 ...

  3. Sublime Text 3 、WebStorm配置实时刷新

    本文所用软件版本Sublime Text 3(Build 3143).WebStorm 2017.2.4(Build #WS-172.4155.35).Google Chrome v61.0.3163 ...

  4. pyqt tableview大数据自动退出_JAVAFX之tableview界面实时刷新导致的内存溢出(自己挖的坑,爬着也要出来啊0.0)...

    Linux编程点击右侧关注,免费入门到精通! 黑客技术点击右侧关注,了解黑客的世界! 作者丨队长给我球. https://www.cnblogs.com/JJJ1990/p/9111199.html ...

  5. SpringBoot项目实现配置实时刷新功能

    需求描述:在SpringBoot项目中,一般业务配置都是写死在配置文件中的,如果某个业务配置想修改,就得重启项目.这在生产环境是不被允许的,这就需要通过技术手段做到配置变更后即使生效.下面就来看一下怎 ...

  6. web页面实时刷新之browser sync

    web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...

  7. web 实时刷新 websocket 大数据

    最近在做的一个项目,是一个大数据分析平台,有如下需求:有如果个实验设备运行并且将运行数据通过socket发送到分析平台,分析平台通过运行socket作业来完成对socket数据的接收,同时还需要对接收 ...

  8. HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色

    设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...

  9. 优雅地实现一个高效、异步数据实时刷新的列表

    今日科技快讯 2月11日消息,据CNBC报道,当特斯拉公司于2019年1月宣布第二轮裁员以控制成本时,一个关键部门受到的打击尤为沉重.两名被裁汰的员工表示,负责向北美地区客户交付Model 3电动汽车 ...

最新文章

  1. MYSQL5-7版本sql_mode=only_full_group_by问题
  2. Android开发之Handler
  3. 信息学奥赛一本通 1017:浮点型数据类型存储空间大小 | OpenJudge NOI 1.2 02
  4. Ant 配置文件 ( Google App Engine + GWT + JPA )
  5. php 钉钉 免登,免登的正确使用方式
  6. 更开放的分布式事务 | Fescar 品牌升级,更名为 Seata
  7. 将当前登录用户去重显示。
  8. xshell远程控制(连接)两个VMware同时启动的Linux操作系统
  9. Hadoop2.6.0配置參数查看小工具
  10. 一位财务自由人士的投资修行
  11. java ssh 连接mysql数据库_Java通过ssh连接访问数据库
  12. HTML电子邮件格式的制作与发送
  13. 数学与泛型编程(7)置换算法
  14. java 中“==”与“equal” 的区别
  15. 一场“测谎”人机对战背后的故事:度小满的技术进击之路
  16. 天玑9200搭载Arm最新旗舰GPU,性能爆表!支持移动端硬件光追
  17. 304. Range Sum Query 2D - Immutable
  18. 日常英文缩写以及杂记
  19. 海康威视DS-K1F100-D8E发卡器Java版
  20. WinRAR如何下载官方免费版

热门文章

  1. A simple class to play sound on netcf (part 2)
  2. 数据结构面试题编程题_您下次编程面试时应该了解的顶级数据结构
  3. (C++)1009 Product of Polynomials
  4. Python未来的发展趋势怎么样
  5. 如何导出Fortify 17.10扫描报告
  6. 第六章:内核数据结构
  7. OpenCV学习系列教程第五篇:测试和提高代码的效率
  8. python tar.gz格式压缩、解压
  9. Java中 与,||与|的区别
  10. 广义动量定理之作用点的应用分析