1. 程式人生 > >zTree非同步展開父節點並選中指定子節點

zTree非同步展開父節點並選中指定子節點

zTree樹形控制元件非同步展開節點,稍後新增程式碼註釋。

當需要根據不同情況勾選不同節點時,可以直接呼叫

expRec.init(tree,"123456")//123456代表不同的引數

在zTree的OnAsyncSuccess方法,呼叫loadAllParents以載入所有父節點

onAsyncSuccess : function(event,treeId,treeNode,msg){
	expRec.loadAllParents(treeNode);
}


下面是expRec的具體實現:

// JavaScript Document
var expRec = {
	url:"",//服務端URL,返回樹形資料Json
	tree:null,//樹例項
	allRecIds:[],//所有需要選中的節點Id
	allParentIds:[],//所有需要選中的節點的父節點,直至樹根
	loadedParentIds:[],//已經非同步載入過子節點的父節點Id
	isParentLoaded:function(id){//檢測該節點是否已經載入過子節點
		for(var i=0;i<this.loadedParentIds.length;i++){
			if(this.loadedParentIds[i] == id){
				return true;
				break;
			}
		}
		return false;
	},
	addParentIds:function (pid){//得到所有父節點Id,不重複
		var pids = pid.split(",");
		for(var j=0;j<pids.length;j++){
			if(pids[j].length == 0) continue;
			if(this.allParentIds.length == 0){
				this.allParentIds.push(pids[j]);
			}
			else{
				for(var k=0;k<this.allParentIds.length;k++){
					if(this.allParentIds[k] == pids[j]){
						break;//如果該節點已存在,則不儲存
					}
					if(k== this.allParentIds.length - 1){
						this.allParentIds.push(pids[j]);
					}
				}
			}
		}
	},
	chkAllRec:function(){//選中所有需要選中的節點
		var node = null,nodeId = null;
		for(var i=0;i<this.allRecIds.length;i++){
			nodeId=this.allRecIds[i];
			node = thid.tree.getNodeByParam("OID",nodeId,null);//OID應根據實際情況替換
			if(node){
				this.tree.checkNode(node,true,false);//第3個引數代表不選中其子節點;如果設為true會選中所有子節點,但實際子節點只是部分被選中
			}
		}
	},
	loadAllParents:function(node){//非同步載入所有父節點
		if(node){
			for(var i=0;i<this.allParentIds.length;k++){
				if(node.OID == this.allParentIds[i]){
					if(i == this.allParentIds.length - 1){
						this.chkAllRec();//如果所有父節點載入完畢,則開始選中動作
					}
					else{
						this.loadParent(this.allParentIds[i+1]);
					}
				}
			}
		}
	},
	loadParent:function(pid){//載入指定的父節點
		var node = this.tree.getNodeByParam("OID",pid,null);
		if(node){
			if(this.isParentLoaded(pid)){
				this.tree.expandNode(node,true,false);//如果已載入過,則直接展開該節點
			}
			else{
				this.loadedParentIds.push(pid);
				this.tree.reAsyncChildNodes(node,"refresh",false);//非同步載入該節點的所有子節點
			}
		}
	},
	showHistory:function(data){//操作的具體執行
		this.tree.checkAllNode(false);//取消所有已選節點
		this.tree.expandAll(false);//閉合所有已展開節點
		if(data.length == 0) return;
		this.allRecIds = [];
		this.allParentIds = [];//必須清空這2個集合
		for(var i = 0;i<data.length;i++){
			this.allRecIds.push(data[i].OID);//OID代表該節點的唯一標識
			this.addParentIds(data[i].parentIDs);//parentIDs代表該節點的所有父節點,以逗號隔開,在服務端遞迴獲取到該欄位,以展開該節點的所有父級
		}
		if(this.allParentIds.length == 0){
			this.chkAllRec();//如果沒有父節點,說明這些節點都是根節點,則直接選中所有節點
		}
		else{
			this.loadParent(this.allParentIds[0]);//這裡先載入第一個父節點,以此觸發zTree樹非同步載入成功的回撥函式OnAsyncSuccess來遞迴載入其他父節點
		}
		//this.test();
	},
	init:function(zTree,dept){//觸發節點展開選中操作
		if(zTree){
			if(dept&&dept.length > 0){
				$.getJSON(this.url+dept,"",function(data){//獲取所有節點資料
					expRec.tree = zTree;
					expRec.showHistory(data);
				});
			}
			else{
				alert("請指定目標單位");
			}
		}
		else{
			alert("目錄樹載入失敗,請重新整理頁面再試!")
		}
	},
	test:function(){
		alert("所有父節點:"+this.allParentIds+"\r\n所有子節點:"+this.allRecIds);
	}
}

相關推薦

zTree非同步展開節點中指定子節點

zTree樹形控制元件非同步展開節點,稍後新增程式碼註釋。 當需要根據不同情況勾選不同節點時,可以直接呼叫 expRec.init(tree,"123456")//123456代表不同的引數 在zTree的OnAsyncSuccess方法,呼叫loadAllParents以

zTree非同步載入資料,預設展開全部節點

非同步載入Tree 想要預設展開全部節點,使用普通的方法是不行的。 例如: $(document).ready(function(){ $.fn.zTree.init($("#areaTree2"), setting3, zNodes3);

zTree(六)非同步傳參和非同步重新整理節點(不固定值,字串型別)

因為涉及到非同步載入節點重新整理問題,所以好好研究了一下zTree非同步傳參 autoParam:非同步載入時需要自動提交父節點屬性的引數。[setting.async.enable = true

ztree學習---將默認勾展開

error alt 設置 pen str rim getparent error: 出現 這裏只給出前臺頁面上的代碼,數據可以從後臺獲取,註意,在封裝數據的時候,註意:Id(節點的id,可以是數字也可以是字符串) , pid(父親節點的id) , name(節點名稱)不能少

zTree異步展開節點下的所有子節點

所有 access 全部 tree view var acc bus false //展開根節點下的第一級子節點 function expendOneNode(event,treeId,treeNode){

zTree實現樹節點的兩種方式

方式一:利用setting配置來實現單選按鈕功能         原理:取消父子節點聯動,設定節點的選擇框為radio單選框。    程式碼設定:     var setting = { ...... check: {

ztree載入完成後顯示勾節點

①前言:這個在度娘上沒有搜到解決的辦法,於是自己查看了ztree的API,發現其實還是比較簡單的。做個筆記以備不時之需。 ②需求: 像下圖一樣,在載入完成之後就顯示需要勾選的項。 ③解決方案: 首先頁面上肯定是要獲取資料庫的資料,比如你儲存的是id或者Code之類的以,隔開的資料。我這裡存貯的是code。

ZTree 設定初始化時勾某個節點

//ZTree初始化所執行的方法         /* 先在callback 方法中設定如下,初始化樹時執行onAsyncSuccess 方法          &nbs

在layer的彈出框中點按鈕重新整理頁面關閉彈出框

今天寫layer彈出框裡面是區域選擇,需要根據選擇的區域進行展示如圖 點選唐人街餐館父頁面會重新整理並且彈出框會消失 程式碼如下: <div>             <c:f

easyui中combotree迴圈獲取節點至根節點輸出路徑

前臺頁面: <pre name="code" class="html"><td style="height: 35px" colspan="7">   <input id="fm_AEType" class="easyui-combot

zTree非同步增加刪除樹節點

<!DOCTYPE html> <HTML> <HEAD><TITLE> ZTREE DEMO - Simple Data</TITLE><meta http-equiv="content-type" co

bootstrap-treeview中關於勾節點節點,以及勾一個子節點自動勾節點

$("#flowOperTypeSingle_tree").treeview({data : orgTree,enableLinks : true,showBorder : false,showCheckbox:true,levels:1,onNodeChecked : f

ZTree非同步載入時查詢節點

ZTree的非同步載入大大提高了頁面的載入速度。 但是,非同步載入樹時,ZTree的自帶的模糊查詢方法(getNodesByParamFuzzy)可就不那麼實用了; 它的查詢範圍僅限於當前頁面已經加載出來的節點,而不能搜尋還未加載出來的節點。 相信大家

找到節點下的所有子節點(包括子節點

新增 not tab clas ren while blog url pkg CREATE TABLE `tab_menu` ( `MU_ID` int(10) NOT NULL AUTO_INCREMENT COMMENT ‘主鍵‘, `MU_NAME`

Mysql 通過節點ID獲取所有子節點數據函數

mysql return mysq char cas begin cast tid 函數 BEGIN DECLARE sTemp text; DECLARE sTempChd text; SET sTemp = ‘$‘; SET sTempChd =ca

三、安裝配置Kubernetes Node節點

vim rgs conf clu leg -a 管理系 redhat pri 1. 安裝並配置Kubernetes Node節點 1.1 安裝Kubernetes Node節點所需服務 yum -y install kubernetes ? 通過yum安裝kubernete

ZooKeeper連接創建節點以及實現分布式鎖操作節點排序輸出最小節點Demo

false bytes roc 永遠 err index public nal kde class LockThread implements Runnable { private DistributedLock lock; public Lo

kubernetes 叢集新增node 節點將應用分配到新增節點

第一章 1.重新安裝一臺kubernetes node節點,新增節點:192.168.1.192  網址:https://www.cnblogs.com/zoulixiang/p/9504324.html     第二章 1.將nginx ,mysql 應用分配到

ButterKnife 在類 點事件沒反應的解決方案

在用繼承的方式實現butterKnife的封裝的時候遇到問題, butterKnife就在baseActivity中繫結的,但是父類中公共控制元件點選事件無效。找了半天原因,原來是子類和父類定義的點選方法名稱相同,導致子類的點選方法覆蓋了父類的。   解決方案:   父類中:

js遞迴遍歷樹形json結構 根據最後一個節點找到整個家族,根據節點找到所有的子節點,根據層級關係寫成樹形結構

dataTree: [ { id: 1, address: "安徽", pid: 0 }, { id: 6, address: "安徽a", pid: 1 }, { id: 12, address: "安徽aa", pid: 6 },