JQuery Easy Ui 可装载组合框 - ComboBox

可装载组合框 - ComboBox

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

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

Dependencies

• combo

使用方法（Usage Example）

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

1. <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
2. <option value="aa">aitem1</option>
3. <option>bitem2</option>
4. <option>bitem3</option>
5. <option>ditem4</option>
6. <option>eitem5</option>
7. </select>

从<input>标记创建combobox.

1. <input id="cc" class="easyui-combobox" name="dept"
2. data-options="valueField:‘id‘,textField:‘text‘,url:‘get_data.php‘" />

使用javascript创建combobox

1. <input id="cc" name="dept" value="aa">

1. $(‘#cc‘).combobox({
2. url:‘combobox_data.json‘,
3. valueField:‘id‘,
4. textField:‘text‘
5. });

创建两个依赖的combobox

1. <input id="cc1" class="easyui-combobox" data-options="
2. valueField: ‘id‘,
3. textField: ‘text‘,
4. url: ‘get_data1.php‘,
5. onSelect: function(rec){
6. var url = ‘get_data2.php?id=‘+rec.id;
7. $(‘#cc2‘).combobox(‘reload‘, url);
8. }" />
9. <input id="cc2" class="easyui-combobox" data-options="valueField:‘id‘,textField:‘text‘" />

json数据转换示例:

1. [{
2. "id":1,
3. "text":"text1"
4. },{
5. "id":2,
6. "text":"text2"
7. },{
8. "id":3,
9. "text":"text3",
10. "selected":true
11. },{
12. "id":4,
13. "text":"text4"
14. },{
15. "id":5,
16. "text":"text5"
17. }]

Properties

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

<input class="easyui-combobox" data-options="
		valueField: ‘label‘,
		textField: ‘value‘,
		data: [{
			label: ‘java‘,
			value: ‘Java‘
		},{
			label: ‘perl‘,
			value: ‘Perl‘
		},{
			label: ‘ruby‘,
			value: ‘Ruby‘
		}]" />

$(‘#cc‘).combobox({
	filter: function(q, row){
		var opts = $(this).combobox(‘options‘);
		return row[opts.textField].indexOf(q) == 0;
	}
});

$(‘#cc‘).combobox({
	formatter: function(row){
		var opts = $(this).combobox(‘options‘);
		return row[opts.textField];
	}
});

Events

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

// 在从远程服务器加载数据之前改变请求参数
$(‘#cc‘).combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = ‘js‘;
	}
});

Methods

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

$(‘#cc‘).combobox(‘reload‘);  //使用原始URL重新加载列表数据
$(‘#cc‘).combobox(‘reload‘,‘get_data.php‘);  //使用新的URL重新加载列表数据

$(‘#cc‘).combobox(‘setValues‘, [‘001‘,‘002‘]);

$(‘#cc‘).combobox(‘setValues‘, ‘001‘);

原文：http://www.cnblogs.com/cnjava/archive/2013/01/21/2869888.html