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

一、应用场景

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

二、项目实践

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

三、代码实现

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

方法实例：

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<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实现节点修改的实时刷新功能，希望对大家有所帮助