jQuery EasyUI 為Combo,Combobox 學習記錄

 EASYUI 多選下拉框 combobox回顯

</pre><pre name="code" class="html"><tr>
					<th><font color="red">*</font>客戶類型：</th>
					<td>
					<input id="affiBaseCusType" name="customerType" type="text" value="${affiBaseInfo.customerType }" class="easyui-combobox" />
					 <a href="javascript:void(0)" target="_blank" rel="external nofollow"  class="easyui-linkbutton" iconCls="icon-cancel" plain="true" οnclick="clearSelect()"></a>
					</td>
				</tr>
           

</pre><pre name="code" class="javascript">//客戶類型
$('#affiBaseCusType').combobox({
	width:250,
	method:'GET',
	url:'${ctx}/baseinfo/affiliatesDict/json',
    idField : 'id',
    textField : 'name',
    multiple:true,
    multiline:true,
	panelHeight:'auto',
    required:true,
    onLoadSuccess: function () { //加載完成後,設定選中第一項 
        var val = $(this).combobox("getData"); 
        $(this).combobox("clear");
   		var curValue = new Array();
   		curValue = this.value.split(',');
//    		alert(curValue+"______________");
   		for(var j=0;j<curValue.length;j++){
//    			alert(curValue[j]+" ~~~~~~~~~");
   		 	for(var i = 0;i<val.length;i++ ){ 
// 	        	 alert(val[i].value+"!!!!!!!!");
	            if (val[i].value==curValue[j]) { 
	                $(this).combobox("select",curValue[j]); 
	            } 
	        } 
   		}
        
    } 
});
           

easyui  下拉樹清單

<tr>
					<th><font color="red">*</font>國别地區：</th>
					<td>
<%-- 					<input name="country" type="text" value="${affiBaseInfo.country }" class="easyui-validatebox" data-options="required:true"/> --%>
<%-- 					<input name="country" class="easyui-combotree" value="${affiBaseInfo.country }" data-options="url:'${ctx}/system/countryArea/json',method:'get',idField: 'id',textField: 'name'" /> --%>
						<input id="affiBaseCountry" name="country" type="text" value="${affiBaseInfo.country }" class="easyui-validatebox" style="width:200px;" />
					</td>
				</tr>
           

//國别地區
$('#affiBaseCountry').combotree({
	width:150,
	method:'GET',
    url: '${ctx}/system/countryArea/json',
    idField : 'id',
    textFiled : 'name',
    animate:true,
    required:true
});
           

easyui  下拉框屬性總結

首先，向伺服器請求資料的位址：

url : null, 

// 向伺服器請求的模式 

method : "post", 

// 本地資料集 

data : null, 

// 是否允許使用者自己輸入 

// editable : false, 

// 真正的值的 key 

valueField : 'value', 

// 顯示的key 

textField : 'text', 

// 寬度 

width : 'auto', 

// 高度 

height : 22, 

// 下拉面闆的寬度 

panelWidth : null, 

// 下拉面版的高度 

panelHeight : 200, 

// 是否支援多選 

multiple : false, 

// 多選時,在框内顯示用什麼分割 

separator : ',', 

// 是否禁用 

disabled : false, 

// 是否顯示下拉箭頭 

hasDownArrow : true, 

// 預設值 

value : '', 

// 延遲搜尋 

delay : 200

}