jQuery EasyUI API 中文文档 - 组合框（ComboBox）

r囧r小猫 2022-04-23 11:14 308阅读 0赞

### **(学习留存，如有侵权，请告知，立刻删除！)** ###

### ComboBox  组合框 ###

扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。

![jeasyui_combobox.png][]

**依赖**

*  combo

**用法**

1.  **<select** id="cc" 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>**

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

1.  $('\#cc').combobox(\{

2.      url:'combobox\_data.json',

3.      valueField:'id',

4.      textField:'text'

5.  \});

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. \}\]

**特性**

其特性扩展自 combo，下列是为combobox 增加的特性。

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 类型 </td> 
 <td> 说明 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td> valueField </td> 
 <td> string </td> 
 <td> 绑定到&nbsp;ComboBox&nbsp;的&nbsp;value&nbsp;上的基础数据的名称。 </td> 
 <td> value </td> 
 </tr> 
 <tr> 
 <td> textField </td> 
 <td> string </td> 
 <td> 绑定到&nbsp;ComboBox&nbsp;的&nbsp;text&nbsp;上的基础数据的名称。 </td> 
 <td> text </td> 
 </tr> 
 <tr> 
 <td> mode </td> 
 <td> string </td> 
 <td> 定义在文本改变时如何加载列表数据。如果组合框从<a href="https://www.baidu.com/s?wd=%E6%9C%8D%E5%8A%A1%E5%99%A8&amp;tn=24004469_oem_dg&amp;rsv_dl=gh_pl_sl_csd" rel="nofollow">服务器</a>加载就设为&nbsp;'remote'&nbsp;。 </td> 
 <td> local </td> 
 </tr> 
 <tr> 
 <td> url </td> 
 <td> string </td> 
 <td> 从远程加载列表数据的&nbsp;URL&nbsp;。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> method </td> 
 <td> string </td> 
 <td> 用来检索数据的&nbsp;http method&nbsp;。 </td> 
 <td> post </td> 
 </tr> 
 <tr> 
 <td> data </td> 
 <td> array </td> 
 <td> 被加载的列表数据。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> filter </td> 
 <td> function </td> 
 <td> 定义当&nbsp;'mode'&nbsp;设为&nbsp;'local'&nbsp;时如何过滤数据。这个函数有两个参数： q：用户输入的文字 row：列表中的行数据。 返回&nbsp;true&nbsp;就允许显示该行。 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> formatter </td> 
 <td> function </td> 
 <td> 定义如何呈现行。这个函数有一个参数：row。 </td> 
 <td> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

**事件**

其事件扩展自 combo，下列是为 combobox 增加的事件。

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 参数 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> onLoadSuccess </td> 
 <td> none </td> 
 <td> 当远程数据加载成功时触发。 </td> 
 </tr> 
 <tr> 
 <td> onLoadError </td> 
 <td> none </td> 
 <td> 当远程数据加载失败时触发。 </td> 
 </tr> 
 <tr> 
 <td> onSelect </td> 
 <td> record </td> 
 <td> 当用户选择一个列表项时触发。 </td> 
 </tr> 
 <tr> 
 <td> onUnselect </td> 
 <td> record </td> 
 <td> 当用户取消选择一个列表项时触发。 </td> 
 </tr> 
 </tbody> 
</table>

**方法**

其方法扩展自 combo，下列是为 combobox 追加或重写的方法。

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 参数 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> options </td> 
 <td> none </td> 
 <td> 返回&nbsp;options&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> getData </td> 
 <td> none </td> 
 <td> 返回加载的数据。 </td> 
 </tr> 
 <tr> 
 <td> loadData </td> 
 <td> data </td> 
 <td> 加载本地列表数据。 </td> 
 </tr> 
 <tr> 
 <td> reload </td> 
 <td> url </td> 
 <td> 请求远程的列表数据。 </td> 
 </tr> 
 <tr> 
 <td> setValues </td> 
 <td> values </td> 
 <td> 把数组设置为组合框的值。 </td> 
 </tr> 
 <tr> 
 <td> setValue </td> 
 <td> value </td> 
 <td> 设置组合框的值。 </td> 
 </tr> 
 <tr> 
 <td> clear </td> 
 <td> none </td> 
 <td> 清除组合框的值。 </td> 
 </tr> 
 <tr> 
 <td> select </td> 
 <td> value </td> 
 <td> 选择指定的选项。 </td> 
 </tr> 
 <tr> 
 <td> unselect </td> 
 <td> value </td> 
 <td> 取消选择指定的选项。 </td> 
 </tr> 
 </tbody> 
</table>

[jeasyui_combobox.png]: /images/20220320/d3dc09ecdbd04987a85350bc62155bbb.png