jQuery EasyUI 组合框(ComboBox)

jQuery EasyUI 组合框(ComboBox)可以把一些HTML控件组合成一个控件，从而达到我们所期望的效果，下面介绍一下组合框详细用法：（查看演示）

HTML代码：首先要定义个select

1. <select id="cc" name="dept"  style="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>

然后按照《jQuery  EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可：

1. $('#cc').combobox(options);

options是组合框的一些选项，比如我们可以利用远程的数据来生成一个提示框

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

下面我们来详细介绍一下选项的设置：

属性

属性名 类型 描述 默认值

width	数字	组件的宽度	auto
listWidth	数字	下拉列表的宽度	null
listHeight	数字	下拉列表的高度	null
valueField	字符串	基础数据值名称绑定到这个组合框	value
textField	字符串	基础数据的字段的名称绑定到这个组合框	text
editable	布尔	定义是否可以直接到文本域中键入文本	true
url	字符串	加载列表数据的远程URL	null

事件

事件名 参数 描述

onLoadSuccess	none	当远程数据成功加载时触发
onLoadError	none	当远程数据加载失败时触发
onSelect	record	当用户选择了一个列表项时触发
onChange	newValue, oldValue	当文本域字段的值改变时触发

方法

方法名 参数 描述

select	value	选择下拉列表中的一项
setValue	param	设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextField属性。
getValue	none	获取字段值
reload	url	请求远程列表数据.

演示

http://jaychang.iteye.com/blog/850257