zTree實現節點修改的實時刷新

一、應用場景

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

二、項目實踐

 

比如要在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、涉及的方法詳解

 

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;
}