1. 程式人生 > >easyui combotree 非同步載入節點 載入值顯示數字id無法顯示文字

easyui combotree 非同步載入節點 載入值顯示數字id無法顯示文字

在頁面上,使用combotree控制元件的時候,由於節點是非同步載入的,人為點選展開節點,才會載入下層子節點。當combotree載入數值的時候,如果是根節點,則可以展示正常的節點文字在combotree文字框中,如果載入數值的節點id是更深層次的子節點,則無法正常展示節點文字,而只能展示原始的節點id在combotree的文字框中,因為這個時候需要被匹配的那個節點根本沒有加載出來,所以只能顯示id。為了解決這個顯示文字不正常的問題,嘗試了很多方法,包括:一次性全載入,區域性按路徑載入,都無法滿足要求,直到看到一篇BLOG,通過對combotree的tree物件追加一個使用者想要的預設值節點,並使其隱藏來達到設定預設值的效果。

根據這個BLOG上面介紹的方法,具體實現為:

//為combotree增加預設值隱藏節點,解決因非同步載入導致預設值id直接顯示到文字框中的問題  
		//cbtid:combotree的id  
		//defval:生成節點的id  
		//deftext:生成節點的文字用於顯示  
		function defaultValue(cbtid,defVal,defText){  
		    var combotree =$('#'+cbtid);  
		    var tree = combotree.combotree('tree');  
		    var defNode = tree.tree('find',defVal);  
		    if(!defNode){  
		        tree.tree('append', {  
		            data: [{  
		                id: defVal,  
		                text: defText  
		            }]  
		        });  
		        defNode = tree.tree('find',defVal);  
		        //console.log(defNode);  
		        //console.log(combotree);  
		        combotree.combotree('setValue',defVal);  
		        tree.tree('select',defNode.target);  
		        defNode.target.style.display='none';  
		    }else{  
		        combotree.combotree('setValue',defVal);  
		    }  
		}
       
       function createTree(id,relaCd) {
    	   $('#rootOrgId').tree({
	            url: '<%=basePath %>organizationRelation/tree',
	            required: true,
	            lines:true,
	            queryParams:{id:id,relaCd:relaCd},
	            onLoadSuccess:
	            	function(node, data){
		            	if (data.length > 0) {
		                    var nodeSelect = $("#rootOrgId").tree('getSelected');
		                    if(nodeSelect == null) {
		                    	//找到第一個元素
			                    var n = $('#rootOrgId').tree('find', data[0].id);
		                    	//呼叫選中事件
			                    $('#rootOrgId').tree('select',n.target);
		                    }
		                }
	            	},
	            onSelect:function(node) {
	            		$("#selectOrgIdHidden").val(node.id);
	            		var parentNode = $('#rootOrgId').tree('getParent', node.target);
	            		
	            		if(parentNode == null || parentNode == undefined || parentNode == "") {
	            			$("#parentOrgIdHidden").val("");
	            		} else {
	            			$("#parentOrgIdHidden").val(parentNode.id);
	            		}
	            		
	            		createOrgTypeCombotree(node.id);
	            		
	            		$.ajax({
	              		  url:'<%=basePath %>organization/getOrg',
	              		  type:'GET',
	              		  data:{orgId:node.id},
	              		  dataType:'json',
	              		  timeout:1000,
	              		  cache:false,
	              		  async:false,
	              		  error:errorFunction,
	              		  success:function(data) {
	              			if(data != null) {
	              				$('#orgIdHidden').val(data.orgId);
	              				$('#orgNameId').textbox('setValue',data.orgName);
	              				$('#orgCodeId').textbox('setValue',data.orgCode);
	              				$('#orgPriorityId').textbox('setValue',data.orgPriority);
	              				$('#areaCodeId').textbox('setValue',data.areaCodeId);
	              				$('#cityTownId').combobox('setValue',data.cityTown);
	              				$('#orgGroupCodeId').textbox('setValue',data.orgGroupCode);
	              				$('#orgShortNameId').textbox('setValue',data.orgShortName);
	              				$('#orgDetailPartyNameId').textbox('setValue',data.partyName);
	              				$('#partyIdHidden').val(data.partyId);
	              				$('#orgTypeId').combobox('setValue',data.orgType);
	              				$('#orgFullNameId').textbox('setValue',data.orgFullName);
	              				
	              				defaultValue('telcomRegionId',data.telcomRegionId,data.regionName);
	              				defaultValue('locationId',data.locationId,data.locationName);
	              			}
	              		  }
	              	    });
	            		
	            	}
	        });
       }
其中核心方法為defaultValue,該方法通過對combotree的tree物件追加一個使用者想要的預設值節點,並使其隱藏來達到設定預設值的效果。

相關推薦

easyui combotree 非同步載入節點 載入顯示數字id無法顯示文字

在頁面上,使用combotree控制元件的時候,由於節點是非同步載入的,人為點選展開節點,才會載入下層子節點。當combotree載入數值的時候,如果是根節點,則可以展示正常的節點文字在combotree文字框中,如果載入數值的節點id是更深層次的子節點,則無法正常展示節點

easyui combotree 非同步資料來源 設定預設

//設定共享表下拉樹的預設值 function setDefaultDbSet(dbSetId, setName) { //設定預設值 if (setDefaultDbSet) { showDbSetAlert = false

easyui combotree設定某節點顯示覆選框

easyui combotree 設定部分節點顯示覆選框 combotree 繼承tree   tree API中提供了checkbox 屬性,但是combotree中沒有,因此需要給combotree加上checkbox 屬性 方法一: //tree.tree($.ext

Easyui combotree 獲取根節點以及所有節點的方法

一、設定combotree預設選中根節點  程式碼: //初始裝置型別下拉列表 $("#deviceType").combotree({     panelHeight : 180,     editable : false,     idField : 'id',    

flask修改程式碼之後網頁顯示或postman無法顯示更新後的結果

    有可能是埠被python佔用,kill掉佔用埠的程序就好。     首先,檢視端口占用情況,參考 https://blog.csdn.net/qq649954944/article/details/79969337。   &

easyUI中tree的預設載入節點

$(document).ready(function() {     $('#comboboxtree').tree({  /* 傳送請求*/         url : 'comboboxtree?',         onLoadSuccess : function(n

easyui datagrid 非同步載入資料時滾動條有時會自動滾到最底部的問題

在使用easyui 的datagrid非同步載入資料時發現滾動條有時會自動滾到最底部。經測試發現,如果載入資料前沒有選中行則不會出現這個問題。這樣我們可以在重新非同步載入資料前取消選中行就可以避免這個問題。 //easyui datagrid 取消選中行 $("#dg").datagrid("clea

kindeditor非同步載入無法顯示編輯框

事情是這樣的,我在A頁面的div通過 jQuery.load() 方法載入一個頁面B時,B頁面帶有編輯框  textarea,現在想讓這個 textarea 顯示為一個 kindeditor的富文字編輯區域,但是怎麼都不能成功,官網上的example根本就跑不起來。(也許是

EasyUI實現非同步載入Tree

Html內容:<fieldset style="height: 350px;"> <ul id="taskTree" style="height:400px;width:250px

easyui treegrid動態載入節點

最近在做一個許可權管理系統,需要有一個選單的管理,選單的資料結構是自關聯無限極的一對多關係。在列表管理頁面決定選擇用easyui的treegrid外掛。考慮到其無限層級關係,若要一次性拿出所有資料那需要在mysql中寫函式跟儲存過程,需要有臨時表的存在,這樣會相對降低效率,

easyui Combotree 怎麼載入資料 支援多選

1、開發環境vs2012 mvc4  c# 2、HTML前端程式碼 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridTest.aspx.cs" Inherits="MvcAppTest.DataGri

spring mvc easyui tree 非同步載入

使用spring mvc 註解 非同步載入一棵樹 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgTree();

如何實現jquery easyui combotree 下拉載入預設選中

    經過多次的測試,發現實現combotree 載入預設選中某個值的方法,常用到修改帶有combotree的用例中,特此記錄下來以備後用: $(function(){//一般是在元素節點載入完畢後初始化 $("#id").combotree({//載入一

Jquery EasyUI Combotree 初始化賦

multiple pat spa align tip 點擊 ces === ucc Jquery EasyUI Combotree 初始化賦值 ================================ ?Copyright 蕃薯耀 2018年5月7日 https

ios UIWebView載入本地html時html樣式、圖片顯示出來

將h5檔案拖到專案中 選擇彈出框Added folders的Create folder references選擇 然後載入 例如 NSURL *url = [NSURL URLWithString:[[NSString stringWithFormat:@““] stringByAddi

Android中scrollview巢狀webview後導致網頁載入成功但無法顯示

                   今天同事提出了一個bug,關於h5頁面無法顯示為空白頁,因為這塊的程式碼不是我寫的,之前同事寫的,所以我就看了一下程式碼,初看沒什麼問題,因為感覺這沒什麼難度,就

JavaScript非同步和同步載入中setTimeout時間執行問題

setTimeout( function(){ alert("1"); },5000) function A(){ //兩種情況: //第一種,A函式是同步載入,載入資料需要10s //第二種,A函式是非同步載入,載入資料需要10s } this.A();

完美解決Android的WebView載入失敗(404,500),顯示的自定義檢視

完美解決Android的WebView載入失敗(404,500),顯示的自定義檢視 好多朋友會在Android開發過程中遇到使用WebView載入html頁面出現404,500等錯誤頁面,也有好多人想自定義這個錯誤頁面,但是在6.0之前,大家覺得自定義錯誤頁面就不好處理了; 之前一

easyui combotree禁止選中父節點

$('#userid').combotree({ url : '${basePath}role/getRoleUser.htm', parentField : 'parent_id', cascadeCheck:false, multiple:true, panelH

easyui combotree 禁止選中父節點

$('#userid').combotree({ url : '${basePath}role/getRoleUser.htm', parentField : 'parent_id', cascadeCheck:false, multiple:true, panelHe