zTree實(shí)現(xiàn)節(jié)點(diǎn)修改的實(shí)時(shí)刷新功能
一、應(yī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)請求對應(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 對象*/ 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ù)對象*/ 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ù),具體請參考 “setting 配置詳解”中的各個(gè)屬性詳細(xì)說明
zNodes Array(JSON)/JSON zTree的節(jié)點(diǎn)數(shù)據(jù),具體請參考 “treeNode 節(jié)點(diǎn)數(shù)據(jù)詳解”中的各個(gè)屬性詳細(xì)說明
返回值
zTree對象,提供操作zTree的各種方法,對于通過js操作zTree來說必須通過此對象
如果不需要自行設(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ù)對象
參數(shù):tId String 節(jié)點(diǎn)在 zTree 內(nèi)的唯一標(biāo)識(shí) tId
返回值:返回值 JSON tId 對應(yīng)的節(jié)點(diǎn) JSON 數(shù)據(jù)對象如無結(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ù)無效,始終進(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)代碼
/** * 查詢工程對象 * * @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í)刷新功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- ztree獲取當(dāng)前選中節(jié)點(diǎn)子節(jié)點(diǎn)id集合的方法
- js樹插件zTree獲取所有選中節(jié)點(diǎn)數(shù)據(jù)的方法
- 后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法
- 在父頁面得到zTree已選中的節(jié)點(diǎn)的方法
- ztree獲取選中節(jié)點(diǎn)時(shí)不能進(jìn)入可視區(qū)域出現(xiàn)BUG如何解決
- jQuery插件zTree實(shí)現(xiàn)刪除樹節(jié)點(diǎn)的方法示例
- zTree異步加載展開第一級(jí)節(jié)點(diǎn)的實(shí)現(xiàn)方法
- jQuery插件zTree實(shí)現(xiàn)的基本樹與節(jié)點(diǎn)獲取操作示例
- jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法
- zTree節(jié)點(diǎn)文字過多的處理方法
相關(guān)文章
echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸demo
這篇文章主要為大家介紹了echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns
js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns...2007-11-11js實(shí)現(xiàn)新年倒計(jì)時(shí)效果
這篇文章主要介紹了js實(shí)現(xiàn)2015年新年倒計(jì)時(shí)效果,很快就要迎接新的一年,想知道距離2016還有多少天嗎?大家可以參考一下這篇文章2015-12-12詳解webpack4之splitchunksPlugin代碼包分拆
這篇文章主要介紹了詳解webpack4之splitchunksPlugin代碼包分拆,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12一個(gè)可以得到元素真實(shí)的背景顏色的javascript腳本
一個(gè)可以得到元素真實(shí)的背景顏色的javascript腳本...2007-07-07