JQuery EasyUI combobox 下拉列表框

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               



下拉列表框

继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults.

组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值。用户可以直接输入文本到顶部的列表,或选择一个或多个当前值列表。

依赖

• combo

应用实例

从<select>创建下拉列表框元素与一个预定义的结构。

[html] 预览 复制 print ?

1. <select id="cc" class="<a title="EasyUI" href="http://wuzhuti.cn/tag/easyui/">EasyUI</a>-combobox" name="dept" style="width:200px;">  
2. <option value="aa">aitem1</option>  
3. <option>bitem2</option>  
4. <option>bitem3</option>  
5. <option>ditem4</option>  
6.   
7. <option>eitem5</option>  
8. </select>  
9.   
10.    

<select id="cc" class="EasyUI-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option><option>ditem4</option><option>eitem5</option></select> 

创建下拉列表框从<input>标记。

[html] 预览 复制 print ?

1. <input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />  

<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />

使用javascript创建下拉列表框。

[html] 预览 复制 print ?

1. <input id="cc" name="dept" value="aa">  
2.   
3. $('#cc').combobox({  
4. url:'combobox_data.json',  
5.   
6. valueField:'id',  
7.   
8. textField:'text'  
9. });  

<input id="cc" name="dept" value="aa">$('#cc').combobox({url:'combobox_data.json',valueField:'id',textField:'text'});

创建两个依赖的组合框。

[html] 预览 复制 print ?

1. <input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php',  
2.   
3. onSelect: function(rec){  
4. var url = 'get_data2.php?id='+rec.id;  
5.   
6. $('#cc2').combobox('reload', url);  
7.   
8.   
9. }" />  
10.   
11. <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />  

<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);}" /><input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />

json数据格式示例:

[{"id":1,"text":"text1" },{"id":2,"text":"text2" },{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4" },{"id":5,"text":"text5" }]

属性

属性从Combo扩展,下面是添加属性组合框。

名称	类型	说明	默认
valueField	string	底层数据值名称绑定到这个组合框，传到后台实际值。	value
textField	string	底层数据字段名称绑定到这个组合框，前台显示值。	text
mode	string	定义了如何加载列表数据当文本改变。设置为“remote“如果下拉列表框从服务器加载。当设置为“remot“模式下,用户类型将被发送的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	定义了如何过滤本地数据当“model”设置为“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。这个函数接受一个参数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扩展,下面是添加事件为下拉列表框。

名称	参数	说明
onBeforeLoad	param	在加载数据前触发事件，如果返回false则不会加载数据代码示例: // 改变参数的http请求从服务器加载数据之前 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	当远程数据加载成功。
onLoadError	none	当远程数据加载错误。
onSelect	record	当用户选择一个列表项。
onUnselect	record	当用户取消选择列表项。

方法

从Combo的方法扩展,下面是添加或重写的方法为下拉列表框。

名称	参数	说明
options	none	返回选择对象。
getData	none	返回数据的加载。
loadData	data	加载区域列表数据。
reload	url	请求远程列表数据。通过“url”参数覆盖原始url值。代码示例: $('#cc').combobox('reload'); // 重新加载列表数据使用旧的URL $('#cc').combobox('reload','get_data.php'); // 重新加载列表数据使用新的URL
setValues	values	设置组合框值数组。代码示例: $('#cc').combobox('setValues', ['001','002']);
setValue	value	设置下拉列表框的值。代码示例: $('#cc').combobox('setValue', '001');
clear	none	清除下拉列表框值。
select	value	选择指定的项。
unselect	value	取消选择指定的项。

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow