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

总结

以上是生活随笔为你收集整理的EasyUI combobox的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。