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.ghttp://etNodeByTId(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], "refrhSUqFhJResh");

}

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实现节点修改的实时刷新功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。