easyUI ComboBox

本文详细介绍了Combobox组件的使用方法,包括基本配置、依赖关系、JSON数据格式、属性设置、事件监听及方法调用等内容。提供了多种创建Combobox组件的方式,并展示了如何通过JavaScript进行动态数据加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@author YHC

继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值

combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.


相关依赖
  • combo
使用示例
从<select>元素和一个预定义结构创建combobox
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">  
    <option value="aa">aitem1</option>  
    <option>bitem2</option>  
    <option>bitem3</option>  
    <option>ditem4</option>  
    <option>eitem5</option>  
</select>  
从<input>标记创建combobox
<input id="cc" class="easyui-combobox" name="dept"  
    data-options="valueField:'id',textField:'text',url:'get_data.php'" />  
使用javascript创建combobox
<input id="cc" name="dept" value="aa">  
$('#cc').combobox({  
    url:'combobox_data.json',  
    valueField:'id',  
    textField:'text'  
});  
创建两个依赖的combobox
<input id="cc1" class="easyui-combobox" data-options="  
        valueField: 'id',  
        textField: 'text',  
        url: 'get_data1.php',  
        onSelect: function(rec){  
            var url = 'get_data2.php?id='+rec.id;  
            $('#cc2').combobox('reload', url);  
        }" />  
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />  
json数据转换示例
[{  
    "id":1,  
    "text":"text1"  
},{  
    "id":2,  
    "text":"text2"  
},{  
    "id":3,  
    "text":"text3",  
    "selected":true  
},{  
    "id":4,  
    "text":"text4"  
},{  
    "id":5,  
    "text":"text5"  
}]  
属性

这些属性继承至 combo,下面是combobox的一些新增属性.

Name Type Description Default
valueField string 绑定到这个combobox的基础数据值名. value
textField string 绑定到这个combobox的数据字段名. text
mode string 当文本改变时定义如何加载显示列表数据.如果设置为'remote' combobox从远程服务器加载数据.当设置为'remote'模式时, 用户输入的信息将发送作为http请求参数,参数名为'q'到服务器检索新的数据. local
url string 一个从远程服务器加载列表数据的URL. null
method string 检索数据的http请求方法 . post
data array 需要加载到列表的数据.

示例代码:

<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
		},{
			label: 'perl',
			value: 'Perl'
		},{
			label: 'ruby',
			value: 'Ruby'
		}]" />
null
filter function 定义如何过滤本地数据,当'mode'设置为'local'的时候. 这个函数提供两个参数:
q: 用户输入的文本.
row: 列表的行数据.
返回true 允许行显示 .

示例代码:

$('#cc').combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});
 
formatter function 定义如何呈现行. 这个函数提供一个参数 :row.

示例代码:

$('#cc').combobox({
	formatter: function(row){
		var opts = $(this).combobox('options');
		return row[opts.textField];
	}
});
 
loader function(param,success,error) 定义如何从远程服务器加载数据. 返回false终止这个动作.这个函数提供一下参数:
param:传递给远程服务器的参数对象.
success(data): 当检索数据成功这个回调函数将被调用.
error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用.
json loader

事件

事件继承至 combo, 以下是combobox的新增事件.

Name Parameters Description
onBeforeLoad param 一个请求在加载数据之前触发,返回false取消这个加载动作.

示例代码:

// 在从远程服务器加载数据之前改变请求参数
$('#cc').combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
	}
});
onLoadSuccess none 当远程数据加载成功之后触发.
onLoadError none 远程数据加载出错触发.
onSelect record 当用户选择一个列表项的时候触发.
onUnselect record 当用户取消选择一个列表项的时候触发.

方法

  方法继承至 combo,以下是combobox的新增的或者是重写的方法.

Name Parameter Description
options none 返回 options 对象.
getData none 返回加载数据.
loadData data 返回本地列表数据.
reload url 请求远程服务器列表数据.传入'url'参数重写原始的URL值.

示例代码:

$('#cc').combobox('reload');  //使用原始URL重新加载列表数据
$('#cc').combobox('reload','get_data.php');  //使用新的URL重新加载列表数据
setValues values 设置 combobox 值数组.

示例代码:

$('#cc').combobox('setValues', ['001','002']);
setValue value 设置 combobox 值.

示例代码:

$('#cc').combobox('setValues', '001');
clear none 清除 combobox 值.
select value 选择特定的项.
unselect value 取消特定的选择项

  以上如果有错误信息,请指出,thanks!





评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值