zTree如何實現節點修改的實時刷新功能

這篇文章將為大家詳細講解有關zTree如何實現節點修改的實時刷新功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、應用場景

在實際應用中會遇到動態操作樹各節點的需求，在增加樹節點后如何實時動態刷新樹就十分有必要了。

二、項目實踐

比如要在test1234節點下新建子節點，首先要選中test1234節點，添加成功后，根據test1234結點的TID去后臺請求對應子節點數據，實現動態刷新。刪除節點類似。

三、代碼實現

1、初始化時必須設置配置

<span > 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如何實現節點修改的實時刷新功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。