可装载组合框 - ComboBox

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

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

Dependencies

  • combo

使用方法（Usage Example）

从<select>元素和一个预定义结构创建combobox.

从<input>标记创建combobox.

使用javascript创建combobox

创建两个依赖的combobox

json数据转换示例:


Properties

这些属性继承至 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

Events

事件继承至 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 当用户取消选择一个列表项的时候触发.

Methods

方法继承至 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 取消特定的选择项.