热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。这篇文章主要介绍了zTree实现节点修改的实时刷新功能,需要的朋友可以参考下

一、应用场景

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

二、项目实践

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

三、代码实现

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

 async:{ 
   enable:true, 
   url:"../admin/scriptManager/loadNodeByID.htm", 
   autoParam:["id"], 
   dataType:"json", 
  }, 
  view: { 
   selectedMulti: false 
  } 
 } 

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 loadNodeByID(Integer id) { 
 List nodes = cuScriptProjectService.loadNodesByID(id); 
 // ZTreeNode zTreeNode = cuScriptProjectService.loadNodeByID(id); 
 return nodes; 
} 

2、

/** 
 * 根据工程ID加载工程节点数据 
*/ 
@Override 
public List 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实现节点修改的实时刷新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • Python 异步编程:深入理解 asyncio 库(上)
    本文介绍了 Python 3.4 版本引入的标准库 asyncio,该库为异步 IO 提供了强大的支持。我们将探讨为什么需要 asyncio,以及它如何简化并发编程的复杂性,并详细介绍其核心概念和使用方法。 ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 本文详细介绍了如何使用Spring Boot进行高效开发,涵盖了配置、实例化容器以及核心注解的使用方法。 ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
author-avatar
杰仔
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有