快捷導(dǎo)航

zTree實(shí)現(xiàn)節(jié)點(diǎn)修改的實(shí)時(shí)刷新功能

更新時(shí)間：2017年03月20日 17:20:49 作者：菜鳥筆記

在實(shí)際應(yīng)用中會(huì)遇到動(dòng)態(tài)操作樹各節(jié)點(diǎn)的需求，在增加樹節(jié)點(diǎn)后如何實(shí)時(shí)動(dòng)態(tài)刷新樹就十分有必要了。這篇文章主要介紹了zTree實(shí)現(xiàn)節(jié)點(diǎn)修改的實(shí)時(shí)刷新功能,需要的朋友可以參考下

一、應(yīng)用場(chǎng)景

在實(shí)際應(yīng)用中會(huì)遇到動(dòng)態(tài)操作樹各節(jié)點(diǎn)的需求，在增加樹節(jié)點(diǎn)后如何實(shí)時(shí)動(dòng)態(tài)刷新樹就十分有必要了。

二、項(xiàng)目實(shí)踐

比如要在test1234節(jié)點(diǎn)下新建子節(jié)點(diǎn)，首先要選中test1234節(jié)點(diǎn)，添加成功后，根據(jù)test1234結(jié)點(diǎn)的TID去后臺(tái)請(qǐng)求對(duì)應(yīng)子節(jié)點(diǎn)數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)刷新。刪除節(jié)點(diǎn)類似。

三、代碼實(shí)現(xiàn)

1、初始化時(shí)必須設(shè)置配置

<span style="font-size:14px;"> async:{ 
   enable:true, 
   url:"../admin/scriptManager/loadNodeByID.htm", 
   autoParam:["id"], 
   dataType:"json", 
  }, 
  view: { 
   selectedMulti: false 
  } 
 }</span>

2、刷新方法

/** 
  * 刷新當(dāng)前節(jié)點(diǎn) 
  */ 
 function refreshNode() { 
  /*根據(jù) treeId 獲取 zTree 對(duì)象*/ 
  var zTree = $.fn.zTree.getZTreeObj("scriptTree"), 
  type = "refresh", 
  silent = false, 
  /*獲取 zTree 當(dāng)前被選中的節(jié)點(diǎn)數(shù)據(jù)集合*/ 
  nodes = zTree.getSelectedNodes(); 
  /*強(qiáng)行異步加載父節(jié)點(diǎn)的子節(jié)點(diǎn)。[setting.async.enable = true 時(shí)有效]*/ 
  zTree.reAsyncChildNodes(nodes[0], type, silent); 
 } 
 /** 
  * 刷新當(dāng)前選擇節(jié)點(diǎn)的父節(jié)點(diǎn) 
  */ 
 function refreshParentNode() { 
  var zTree = $.fn.zTree.getZTreeObj("scriptTree"), 
  type = "refresh", 
  silent = false, 
  nodes = zTree.getSelectedNodes(); 
  /*根據(jù) zTree 的唯一標(biāo)識(shí) tId 快速獲取節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象*/ 
  var parentNode = zTree.getNodeByTId(nodes[0].parentTId); 
  /*選中指定節(jié)點(diǎn)*/ 
  zTree.selectNode(parentNode); 
  zTree.reAsyncChildNodes(parentNode, type, silent); 
 }

3、涉及的方法詳解

1、$.fn.zTree.init(obj,zSetting,zNodes)zTree的初始化方法，創(chuàng)建zTree必須使用此方法

參數(shù)說明

obj JQuery Object用于展現(xiàn)zTree的DOM容器

zSetting JSON zTree的配置數(shù)據(jù)，具體請(qǐng)參考 “setting 配置詳解”中的各個(gè)屬性詳細(xì)說明

zNodes Array(JSON)/JSON zTree的節(jié)點(diǎn)數(shù)據(jù)，具體請(qǐng)參考 “treeNode 節(jié)點(diǎn)數(shù)據(jù)詳解”中的各個(gè)屬性詳細(xì)說明

返回值

zTree對(duì)象，提供操作zTree的各種方法，對(duì)于通過js操作zTree來(lái)說必須通過此對(duì)象

如果不需要自行設(shè)定全局變量保存，可以利用

2、zTreeObj.getSelectedNodes獲取 zTree 當(dāng)前被選中的節(jié)點(diǎn)數(shù)據(jù)集合

返回值

返回值 Array(JSON)當(dāng)前被選中的節(jié)點(diǎn)數(shù)據(jù)集合

方法實(shí)例：

1. 獲取當(dāng)前被選中的節(jié)點(diǎn)數(shù)據(jù)集合

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();

3、zTreeObj.getNodeByTId根據(jù) zTree 的唯一標(biāo)識(shí) tId 快速獲取節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象

參數(shù)：tId String 節(jié)點(diǎn)在 zTree 內(nèi)的唯一標(biāo)識(shí) tId

返回值：返回值 JSON tId 對(duì)應(yīng)的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象如無(wú)結(jié)果，返回 null

方法實(shí)例：

1. 獲取 tId = "tree_10" 的節(jié)點(diǎn)數(shù)據(jù)

var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByTId("tree_10");

4、zTreeObj.selectNode選中指定節(jié)點(diǎn)

參數(shù)：treeNode JSON 需要被選中的節(jié)點(diǎn)數(shù)據(jù)

addFlag Boolean

addFlag = true 表示追加選中，會(huì)出現(xiàn)多點(diǎn)同時(shí)被選中的情況

addFlag = false 表示單獨(dú)選中，原先被選中的節(jié)點(diǎn)會(huì)被取消選中狀態(tài)

setting.view.selectedMulti = false 時(shí)，此參數(shù)無(wú)效，始終進(jìn)行單獨(dú)選中

5、zTreeObj.reAsyncChildNodes強(qiáng)行異步加載父節(jié)點(diǎn)的子節(jié)點(diǎn)。[setting.async.enable = true 時(shí)有效]

參數(shù)：parentNode JSON 指定需要異步加載的父節(jié)點(diǎn) JSON 數(shù)據(jù)，

reloadType String reloadType = "refresh" 表示清空后重新加載。reloadType != "refresh" 時(shí)，表示追加子節(jié)點(diǎn)處理
isSilent Boolean 設(shè)定異步加載后是否自動(dòng)展開父節(jié)點(diǎn)。isSilent = true 時(shí)，不展開父節(jié)點(diǎn)，其他值或缺省狀態(tài)都自動(dòng)展開。

方法實(shí)例

1. 重新異步加載當(dāng)前選中的第一個(gè)節(jié)點(diǎn)

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
treeObj.reAsyncChildNodes(nodes[0], "refresh");
}

4、部分后臺(tái)代碼

/** 
* 查詢工程對(duì)象 
* 
* @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、

/** 
 * 根據(jù)工程ID加載工程節(jié)點(diǎn)數(shù)據(jù) 
*/ 
@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); 
 /* 構(gòu)建ZTreeNode數(shù)據(jù)結(jié)構(gòu) */ 
 List<ZTreeNode> treeNodeList = new ArrayList<ZTreeNode>(); 
 loopBuildZTree(id, allPorjectList, allScriptMap, treeNodeList); 
 return treeNodeList; 
}

以上所述是小編給大家介紹的zTree實(shí)現(xiàn)節(jié)點(diǎn)修改的實(shí)時(shí)刷新功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: