easyUI ComboBox

最新推荐文章于 2025-06-29 21:22:23 发布

转载最新推荐文章于 2025-06-29 21:22:23 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cmblogs/p/3886907.html

文章标签：

#javascript #json #php #ViewUI

本文介绍了EasyUI框架中Combobox组件的使用方法，包括基本配置、数据绑定、事件监听及自定义操作等内容。通过实例展示了如何从<select>元素创建Combobox、设置依赖Combobox、加载本地或远程数据等。

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

使用示例

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

<option value="aa">aitem1</option>

<option>bitem2</option>

<option>bitem3</option>

<option>ditem4</option>

<option>eitem5</option>

</select>

从<input>标记创建combobox

方法1：

<input id="cc" class="easyui-combobox" name="dept"

data-options="valueField:'id',textField:'text',url:'get_data.php'" />

方法2：

$('#cc').combobox({

url:'combobox_data.json',

valueField:'id',

textField:'text'

});

方法3：

<input id="cc" class="easyui-combobox" name="dept"

data-options="valueField:'id',textField:'text'" />

$("#cc").combobox("loadData",$.parseJSON(data)) ;

创建两个依赖的combobox

<input id="cc1" class="easyui-combobox" data-options="

valueField: 'id',

textField: 'text',

url: 'get_data1.php',

onSelect: function(rec){

var url = 'get_data2.php?id='+rec.id;

$('#cc2').combobox('reload', url);

}" />

json数据转换示例

[{

"id":1,

"text":"text1"

},{

"id":2,

"text":"text2"

},{

"id":3,

"text":"text3",

"selected":true

},{

"id":4,

"text":"text4"

},{

"id":5,

"text":"text5"

}]

属性

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

Name	Type	Description	Default
valueField	string	绑定到这个combobox的基础数据值名.	value
textField	string	绑定到这个combobox的数据字段名.	text
mode	string	当文本改变时定义如何加载显示列表数据.如果设置为'remote' combobox从远程服务器加载数据.当设置为'remote'模式时, 用户输入的信息将发送作为http请求参数,参数名为'q'到服务器检索新的数据.	local
url	string	一个从远程服务器加载列表数据的URL.	null
method	string	检索数据的http请求方法 .	post
data	array	需要加载到列表的数据. 示例代码: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />	null
filter	function	定义如何过滤本地数据,当'mode'设置为'local'的时候. 这个函数提供两个参数: q: 用户输入的文本. row: 列表的行数据. 返回true 允许行显示 . 示例代码: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });
formatter	function	定义如何呈现行. 这个函数提供一个参数 :row. 示例代码: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });
loader	function(param,success,error)	定义如何从远程服务器加载数据. 返回false终止这个动作.这个函数提供一下参数: param:传递给远程服务器的参数对象. success(data): 当检索数据成功这个回调函数将被调用. error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用.	json loader

事件

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

Name	Parameters	Description
onBeforeLoad	param	一个请求在加载数据之前触发,返回false取消这个加载动作. 示例代码: // 在从远程服务器加载数据之前改变请求参数 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	当远程数据加载成功之后触发.
onLoadError	none	远程数据加载出错触发.
onSelect	record	当用户选择一个列表项的时候触发.
onUnselect	record	当用户取消选择一个列表项的时候触发.

方法

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

Name	Parameter	Description
options	none	返回 options 对象.
getData	none	返回加载数据.
loadData	data	返回本地列表数据.
reload	url	请求远程服务器列表数据.传入'url'参数重写原始的URL值. 示例代码: $('#cc').combobox('reload'); //使用原始URL重新加载列表数据 $('#cc').combobox('reload','get_data.php'); //使用新的URL重新加载列表数据
setValues	values	设置 combobox 值数组. 示例代码: $('#cc').combobox('setValues', ['001','002']);
setValue	value	设置 combobox 值. 示例代码: $('#cc').combobox('setValues', '001');
clear	none	清除 combobox 值.
select	value	选择特定的项.
unselect	value	取消特定的选择项