一、应用场景
在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。
二、项目实践
比如要在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、刷新方法
- 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、涉及的方法详解
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;
- }