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

一、应用场景

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

二、项目实践

 

比如要在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.      */  
  19.     function refreshParentNode() {  
  20.         var zTree = $.fn.zTree.getZTreeObj("scriptTree"),  
  21.         type = "refresh",  
  22.         silent = false,  
  23.         nodes = zTree.getSelectedNodes();  
  24.         /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/  
  25.         var parentNode = zTree.getNodeByTId(nodes[0].parentTId);  
  26.         /*选中指定节点*/  
  27.         zTree.selectNode(parentNode);  
  28.         zTree.reAsyncChildNodes(parentNode, type, silent);  
  29.     }  


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.   
  11.     /* 查询脚本集合 */  
  12.     List<CUScript> allScripts = this.cuScriptDAO.findAllScripts();  
  13.     Map<Integer, List<CUScriptVO>> allScriptMap = this.buildScriptVOMap(allScripts);  
  14.   
  15.   
  16.     /* 构建ZTreeNode数据结构 */  
  17.     List<ZTreeNode> treeNodeList = new ArrayList<ZTreeNode>();  
  18.     loopBuildZTree(id, allPorjectList, allScriptMap, treeNodeList);  
  19.     return treeNodeList;  
  20. }  
posted @ 2018-02-23 11:04  _小豪豪  阅读(7592)  评论(0编辑  收藏  举报