一、应用场景

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

二、项目实践

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

三、代码实现

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

 
  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、刷新方法

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

  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、
  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. }

zTree实现节点修改的实时刷新的更多相关文章

  1. grunt实现修改代码实时刷新浏览器

    grunt例子:https://github.com/Aquarius1993/gruntDemo grunt 实时刷新1:           1.安装chrome浏览器插件:liveReload ...

  2. webpack实现修改代码实时刷新浏览器

    webpack例子:https://github.com/Aquarius1993/webpackDemo 1. 需要全局和项目安装webpack和webpack-dev-server npm ins ...

  3. gulp使用 实现文件修改实时刷新

    gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...

  4. 使用SignalR实现比特币价格实时刷新

    ASP.NET SignalR是微软支持的一个运行在 Dot NET 平台上的 HTML Websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重 ...

  5. Gulp-livereload:实时刷新编码

    实现功能 监听指定目录下的所有文件,实时动态刷新页面 安装(Install) 功能的实现是借助 gulp-connect 插件完成的;所以,首先通过下面命令完成插件安装: npm install -- ...

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

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

  7. JAVAFX之tableview界面实时刷新导致的内存溢出(自己挖的坑,爬着也要出来啊0.0)

    这几天遇到了一个问题,不幸开发的一个cs架构的工具,客户端开启后,内存一直在缓慢增长最终导致进程卡死,花了4天时间,终于爬出来了... 客户端通过timer定时器每30秒查询一次数据库以及一些业务逻辑 ...

  8. webpack热加载:修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  9. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

随机推荐

  1. Ubuntu下用matplotlib作图时显示中文

    之前在Ubuntu下用matplotlib作图的时候发现无法正常显示中文,查了一番以后发现是Ubuntu系统和matplotlib库没有共同可显示的中文字体库的原因.用此文章的方法可以解决这一问题. ...

  2. phpcms v9 添加内容出现500错误

    今天开发好一个网站,上传网站后,不知道安装的时候要求fsockopen()函数打开,我直接跳过安装完成的,所以搞得后面出错了,我一直以为这个问题,今天花了一天的时间找资料,测试,终于知道什么原因了,其 ...

  3. iOS js与objective-c的交互(转)

    在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要从现在的网页跳到另外一个网页的时候,就会去修改 window.location.href 的位置:在我们的 Ob ...

  4. android:versionCode和android:versionName 用途(转)

    转自:http://blog.csdn.net/wh_19910525/article/details/8660416 Android的版本可以在androidmainfest.xml中定义,主要有a ...

  5. Disconf (version : 2.6.21)

    通常我们会做如下配置:(disconf 2.6.21) <!-- 一次扫描 --> <bean id="disconfMgrBean" class="c ...

  6. SpringBoot(三)-- 整合FreeMarker模板

    1.pom依赖 <!-- 引入freeMarker的依赖包. --> <dependency> <groupId>org.springframework.boot& ...

  7. 数字图像处理笔记与体会(一)——matlab编程基础

    最近开始学习数字图像处理,使用matlab实现,下面我就来记录笔记和体会,一方面是给大家提供参考,另一方面是防止我忘记了. 复习一下: 1.数字图像是用一个数字矩阵来表示的,数字阵列中的每个数字,表示 ...

  8. Elastic Search 5.4.3 java api 入门

    首先介绍一点,es的版本从之前的2.x跳跃到5.x,很多插件要保持一致,不然会产生很多版本不兼容的问题. 首先看一个demo先熟悉一下, 具体代码在git服务器上: https://github.co ...

  9. AngularJS的初步学习(1)

    AngularJS 是一个Javascript框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式绑定数据到 HT ...

  10. 节日换肤通用技术方案__iOS端实现

    一.问题的提出 不知道大家有没有发现, 元旦期间, 很多APP界面里的图标都换成了具有节日气氛的样式, 而在过了元旦节之后, 这些图标又悄无声息的变回了本来的面貌. 这些具有短暂生命周期.而又必须在固 ...