jQuery EasyUI 组合框(ComboBox)可以把一些HTML控件组合成一个控件,从而达到我们所期望的效果,下面介绍一下组合框详细用法:(查看演示)
HTML代码:首先要定义个select
- <select id="cc" name="dept" style="width:200px;">
- <option value="aa">aitem1</option>
- <option>bitem2</option>
- <option>bitem3</option>
- <option>ditem4</option>
- <option>eitem5</option>
- </select>
然后按照《jQuery EasyUI框架使用文档》包含必要文件后,只要在$(function(){ }); 里插入下面的代码即可:
- $('#cc').combobox(options);
options是组合框的一些选项,比如我们可以利用远程的数据来生成一个提示框
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
下面我们来详细介绍一下选项的设置:
属性
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 | 请求远程列表数据. |