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