www.6766.comzTree实现节点修改的实时刷新功能_javascript技巧_脚本之家

一、应用场景

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

二、项目实践

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

三、代码实现

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

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

/** * 刷新当前节点 */ function refreshNode() { /*根据 treeId 获取 zTree 对象*/ var zTree = $.fn.zTree.getZTreeObj, 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, type = "refresh", silent = false, nodes = zTree.getSelectedNodes(); /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/ var parentNode = zTree.getNodeByTId; /*选中指定节点*/ zTree.selectNode; zTree.reAsyncChildNodes(parentNode, type, silent); } 

1、$.fn.zTree.initzTree的初始化方法,创建zTree必须使用此方法

obj JQuery Object用于展现zTree的DOM容器

zSetting JSON zTree的配置数据,具体请参考 “setting
配置详解”中的各个属性详细说明

zNodes Array/JSON zTree的节点数据,具体请参考 “treeNode
节点数据详解”中的各个属性详细说明

zTree对象,提供操作zTree的各种方法,对于通过js操作zTree来说必须通过此对象

如果不需要自行设定全局变量保存,可以利用

2、zTreeObj.getSelectedNodes获取 zTree 当前被选中的节点数据集合

返回值 Array当前被选中的节点数据集合

  1. 获取当前被选中的节点数据集合

    var treeObj = $.fn.zTree.getZTreeObj;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;var node = treeObj.getNodeByTId;

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;var nodes = treeObj.getSelectedNodes {treeObj.reAsyncChildNodes;}

    /* 查询工程对象 @return */ @ResponseBody @RequestMapping public List loadNodeByID { List nodes = cuScriptProjectService.loadNodesByID; // ZTreeNode zTreeNode = cuScriptProjectService.loadNodeByID; return nodes; }

    /* 根据工程ID加载工程节点数据 / @Override public List loadNodesByID { / 查询工程集合 / List allProjects = this.cuProjectDAO.findAllProjects(); Map> allPorjectList = this.buildProjectVOMap; / 查询脚本集合 / List allScripts = this.cuScriptDAO.findAllScripts(); Map> allScriptMap = this.buildScriptVOMap; / 构建ZTreeNode数据结构 */ List treeNodeList = new ArrayList(); loopBuildZTree(id, allPorjectList, allScriptMap, treeNodeList); return treeNodeList; }

以上所述是小编给大家介绍的zTree实现节点修改的实时刷新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图