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);