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);
复制代码
分类:  JAVASCRIPT
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/4814161.html ,如需转载请自行联系原作者

相关文章
Easyui combobox 取值赋值解答
Easyui combobox 取值赋值解答
|
7月前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
easyUI datagarid 编辑状态下的combobox动态赋值
easyUI datagarid 编辑状态下的combobox动态赋值
|
JSON 数据格式
easyUI 的combobox如何获取除valueField和textField外的三个值
easyUI 的combobox如何获取除valueField和textField外的三个值
|
存储 数据库
easyui-form表单提交combobox
easyui-form表单提交combobox
90 0
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
418 0
|
存储 JSON JavaScript
Easyui datagrid combobox输入框非法输入判断与事件总结
Easyui datagrid combobox输入框非法输入判断与事件总结
195 0
|
JSON 数据格式
EasyUI–下拉框combobox
首先声明,所谓的数据控件这一个概念,EasyUI官方应该也没这个说法。猫哥是感觉网页上经常使用的、经常需要从后台获取数据后显示到控件内部的,有这么四个:下拉框、下拉列表、树、表格。
252 0
EasyUI–下拉框combobox