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 |
请求远程列表数据. |
演示
http://jaychang.iteye.com/blog/850257