开发者社区> 涂作权> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JQuery EasyUI combobox(下拉列表框)

简介:  下拉列表框 继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults. 组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值。用户可以直接输入文本到顶部的列表,或选择一个或多个当前值列表。 依赖 combo 应用实例 从<select>创建下拉列表框元素与一个预定义的结构。 [html] 预
+关注继续查看


下拉列表框

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

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

依赖

应用实例

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

  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>标记。

  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创建下拉列表框。

  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'
});

创建两个依赖的组合框。

  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 取消选择指定的项。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用jquery-easyui写的CRUD插件(3)
好,静态的页面已经可以完成了,下面就开始加上后台的处理部分。 查看easyui的API可以看到,如果需要后台支持的话,需要设置url属性,下面用java来做后台处理数据。 传输的格式用的是JSON,如果你还不知道JSON那么就去baidu一下好了。
860 0
使用jquery-easyui写的CRUD插件(1)
写插件先看看jqeury的插件如何写,先了解一下如何写插件的代码。 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。
921 0
使用jquery-easyui写的CRUD插件(2)
首先定义变量   代码 var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);var addTypeName = options.
817 0
TaggingJS – 可以灵活定制的 jQuery 标签系统插件
  TaggingJS 是一款 jQuery 插件,用来创建高度可定制的前端标签系统。这款插件不到3KB ,支持主流浏览器。有几种方法来定制 TaggingJS 的默认行为:一是使用  custom_options 定制全局的 TaggingJS 行为;二是给标签框加上 data 属性;三是结合前面两种方式。
817 0
赞!带进度条的 jQuery 文件拖放上传插件
  jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果。作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 Hack 的方式使之兼容那些古老的浏览器。
850 0
+关注
涂作权
java,架构,编程语言相关专家
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载