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