EasyUI ComboBox应用示例

直接进入主题，假如使用如下的标签来创建ComboBox:

对于JS代码主要考虑如下的情景

1，创建ComboBox的时候已经具备数据源（intervalDatas）,其定义如下：

var intervalDatas= [{text:'年',value:'year'},{text:'月',value:'month'},{text:'日',value:'day'}] ;

接着就开始初始化组件并赋予下拉列表的值：

$('#cmbx_interval').combobox({
        valueField:'value', //对应数据中的某个属性
        textField:'text',    //对应数据中的某个属性
        width:120,
        data:intervalDatas,

选择事件，data是被选中的一个对象，例如：{text:'年',value:'year'}

*/
onSelect:function(data){ }
});

如此一来ComboBox就创建好了。但是当前并没有默认的选择项，如果做看后面。

2，创建ComboBox的时候不具备数据源，等待后面再赋值

如果我们初始化了ComboBox,如下：

$('#cmbx_interval').combobox({
valueField:'value', //对应数据中的某个属性
textField:'text', //对应数据中的某个属性
});

同时我们从服务器获得了数据源intervalDatas，接下来便加载数据源：

$('#cmbx_interval').combobox('loadData',intervalDatas) ;

这里的loadData其实就是它提供的方法，intervalDatas就是给这个方法传递的参数。

3，ComboBox的数据源有了，如何让他默认的选择某项呢，使用如下方法

$('#cmbx_interval').combobox('setValue',intervalDatas[0].value) ;

注意这里标红的“value”,他是对象里面的一个属性，同时要和初始化ComboBox时候指定的valueField一致

4，初始化过后如何直接获取ComboBox选中的项

var value = $('#cmbx_interval').combobox('getValue') ; //返回valueField指定的属性值

var text = $('#cmbx_interval').combobox('getText')； //返回textField指定的属性值

还有一种方法，只需稍微修改下数据源就可以：

var intervalData = [{text:'年',value:'year'},{text:'月',value:'month'},

{text:'日',value:'day','selected':true}] ;

只需在对象上添加selected属性并设置为true，那么初始化后便会默认选择该项。

转载于:https://blog.51cto.com/dengshuangfu/1709128

EasyUI ComboBox应用示例相关推荐

easyui combobox开启搜索自动完成功能
combo.json [{"id":-1,"text":" ","spell":""},{" ...
Easyui combobox设置值和文本的几种方式和问题
Easyui combobox设置值和文本的几种方式和问题 1.在Easyui 帮助文档中,我们可以看到combobox是继承自combo,combo中有两上方法:setText.setValue. ...
【easyui】easyui combobox 如何清空已加载的数据？
easyui combobox 如何清空已加载的数据? 两种方式: 1. $('#leaveCountry').combobox('clear'); //清除已选中数据 $('#leaveCountr ...
【easyui】easyui combobox 如何清空已加载的数据？
easyui combobox 如何清空已加载的数据? 两种方式: 1. $('#leaveCountry').combobox('clear'); //清除已选中数据 $(' ...
easyui combobox 拼音检索快捷选择输入
easyui combobox 拼音检索快捷选择输入效果如图 $.ajax({url: UserActionUrl + '?action=listuserworktype',dataType: 'j ...
JQuery EasyUI combobox(下拉列表框)
下拉列表框继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults. 组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值.用户可以直接输入文 ...
js怎么定义combobox_jQuery EasyUI -ComboBox（下拉列表框）
一.combobox 前台页面动态加载显示判断输入值在下拉列表是否存在 var nameStr =''; $(document).ready(function(){ $('#customerId') ...
EasyUI combobox 中文无法检索最终解决方案！
写在前面: 因为之前一直用EasyUI的combobox控件,但是苦于在火狐浏览器下输入中文无法直接检索必须在输入完成后再敲击一下键盘才可以(按一下shift或空格),原因是中文输入法屏蔽了EasyU ...
easyUI Combobox自定义调整支持中文模糊查询
1.调整Combobox支持模糊查询,并支持从任意位置开始匹配解决方案:将字符串的indexof匹配由原来的判定为头部匹配,改为包含匹配 return row[opts.textField].toL ...

EasyUI ComboBox应用示例

EasyUI ComboBox应用示例相关推荐

最新文章

热门文章