EasyUI combobox
設置Combobox默認選中項
$("#selectDock").combobox({
valueField: 'value',
textField: 'label',
panelHeight:"auto",
data: [{
label: '靠上',
value: 'top',
selected:true //默認選中項
}, {
label: '靠左',
value: 'left'
}],
onSelect: function (rec) {
//選中事件
}
});
當文本框和combobox設置同樣的寬度的時候，代碼視圖展示如圖，都設置為148px寬度
預覽后的效果如下：
同樣寬度情況下，combobox設置的寬度 多加6px 才可以和文本框顯示一樣的長度
=========================================================
通過ajax后台獲取json數據 初始化combobox
$("#selectCategory").combobox({
url: "http://www.cnblogs.com/Ajax/sys/DomainCategory.ashx?Method=GetAllCategorys",
valueField: "CategoryID",
textField: "CategoryName"
value: '-1',//默認選中項
//panelHeight: "auto",//去掉該屬性，當內容過多的時候就會自動出現滾動條
});
設置combobox選中項：$('#selectCategory').combobox('setValue', "123");
禁制用戶輸入屬性：editable:false
$("#A_selectCategory").combobox({
url: "http://www.cnblogs.com/Ajax/sys/DomainCategory.ashx?Method=GetAllCategorys",
valueField: "CategoryID",
textField: "CategoryName",
editable:false
});
combobox默認選中項=====================================================
ajax獲取后台的JSON數據,在第一個節點的屬性上添加 selected:true 這個屬性 即可讓這個節點默認為選中的，但是這樣我們后台獲取的數據不大好處理，我一般都是一個datatable或者List 用json.net直接轉換為json了。
另外一種方式：參考網址：http://www.jeasyui.com/documentation/combobox.php
就是在combobox的加載完畢事件里獲取當前的combobox數據，設置第一個節點為選中項
$("#select_Dic").combobox({ url: "http://www.cnblogs.com/Ajax/sys/WebServiceBase.ashx?Method=GetRefItems", //獲取所有私有域 valueField: "Code", textField: "Name", panelHeight: "auto", editable: false, //不允許手動輸入 onLoadSuccess: function () { //數據加載完畢事件 var data = $('#select_Dic').combobox('getData'); if (data.length > 0) { $("#select_Dic").combobox('select', data[0].Code); } } });
另外一種較為簡單點的寫法
onLoadSuccess: function () { var data = $(this).combobox('getData'); if (data.length > 0) { $(this).combobox('select', data[0].Code); } }
==========================================================================================================
選中多個值
$("#GC025_WRYLB").combobox({
method: "post",
data: [
{CODE: '31', NAME: '大氣環境污染源' }, { CODE: '32', NAME: '地表水體環境污染源' }, { CODE: '33', NAME: '地下水體環境污染源' },
{ CODE: '34', NAME: '海洋環境污染源' }, { CODE: '35', NAME: '土壤環境污染源' }, { CODE: '36', NAME: '聲環境污染源' }, { CODE: '37', NAME: '振動環境污染源' },
{ CODE: '38', NAME: '放射性環境污染源' }, { CODE: '41', NAME: '電磁環境污染源' }, { CODE: '49', NAME: '其他污染對象的污染源'}],
valueField: "CODE",
textField: "NAME",
value: '32',
multiple: true, //多選
editable: false,
onLoadSuccess: function () {
}
});
獲取選中的多個值。將獲取到的值通過ajax傳入到后台的時候，取出來的數據例如是："31,32,33,34" 需要對該字符串編碼 encodeURI() 后台通過 UrlDecode解碼即可，否則后台獲取到的是空值
var GC025_WRYLB = $('#GC025_WRYLB').combobox('getValues'); //污染源類別 這里注意是用的getValues
設置多個選中值
$('#GC025_WRYLB').combobox('setValues', ['32','33']);//后面的值是數組的形式
例如我從后台的數據庫里取出來了數據前台的賦值方法。數據內的數據的存儲如下圖，
31,32,33,34這樣存儲選中的多個值
前台的賦值方法是
var vArray = new Array();//創建一個數組 var str = row.GC025_WRYLB.toString().split(','); for (var i = 0; i < str.length; i++) { vArray.push(str[i]);//循環把值添加到數組里面 } $('#GC025_WRYLB').combobox('setValues', vArray);
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。