源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-12-06 19:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:zTree实现节点修改的实时刷新功能
[b]一、应用场景[/b] 在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。 [b]二、项目实践[/b] [img]http://files.jb51.net/file_images/article/201703/2017032017194920.png[/img] 比如要在test1234节点下新建子节点,首先要选中test1234节点,添加成功后,根据test1234结点的TID去后台请求对应子节点数据,实现动态刷新。删除节点类似。 [b]三、代码实现[/b] 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 [b]方法实例:[/b] 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 时,不展开父节点,其他值或缺省状态都自动展开。 [b]方法实例[/b] 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实现节点修改的实时刷新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部