JQuery EasyUI combobox(下拉列表框)
下拉列表框
继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults.
组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值。用户可以直接输入文本到顶部的列表,或选择一个或多个当前值列表。
依赖
- combo
应用实例
从<select>创建下拉列表框元素与一个预定义的结构。
- <select id="cc" class="<a title="EasyUI" href="http://wuzhuti.cn/tag/easyui/">EasyUI</a>-combobox" name="dept" style="width:200px;">
- <option value="aa">aitem1</option>
- <option>bitem2</option>
- <option>bitem3</option>
- <option>ditem4</option>
- <option>eitem5</option>
- </select>
<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>标记。
- <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创建下拉列表框。
- <input id="cc" name="dept" value="aa">
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
<input id="cc" name="dept" value="aa">$('#cc').combobox({
url:'combobox_data.json',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'" />
<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 combobox(下拉列表框)相关推荐
- jQuery EasyUI -ComboBox(下拉列表框)使用
注:https://www.cnblogs.com/huoxiansudi/p/6588308.html
- jQuery EasyUI combobox多选及赋值、读取、回显
2019独角兽企业重金招聘Python工程师标准>>> html代码: <input class="easyui-combobox" name=" ...
- jquery easyui combobox设置默认选中第一项
combobox的内容是从后台获取的json, js截取: var data = $('#id').combobox('getData'); $("#id ").combobox ...
- jQuery EasyUI combobox多选及赋值
1.多选属性multiple multiple:true多选 multiple:false单选 <input class="easyui-combobox" id=" ...
- 第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...
- JQuery EasyUI入门
JQuery EasyUI入门 @(JavaScript)[jQuery, EasyUI, 入门] JQuery EasyUI入门 基本概述 案例 Layout布局 Accordion手风琴 Tab选 ...
- jquery easyUI第一篇【介绍、入门、使用常用的组件】
tags: web前端库 什么是easyUI 我们可以看官方对easyUI的介绍: easyUI就是一个在Jquery的基础上封装了一些组件....我们在编写页面的时候,就可以直接使用这些组件...非 ...
- easyui java1234_李炎恢jQuery EasyUI视频教程 下载
李炎恢jQuery EasyUI视频教程 下载 01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQ ...
- jQuery EasyUI ztree插件使用
1.下载easyUI的开发包 该包的结构是 2.将easyUI的资源文件引入的页面中: <link rel="stylesheet" type="text/css& ...
最新文章
- 【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信(下)
- Windows Management Instrumentation WMI Security Technology Learning
- 【转】如何缩进你的代码?
- 设计模式(二)之装饰器模式
- linux扩展根路径,Linux虚拟机根(/)目录扩容
- TeeChart的X轴,使用伪装的时间
- oracle存储过程和视图不存在,Oracle 创建存储过程 提示权限不足或者提示表和视图不存在问题...
- 使用STM32和freeRTOS实现《贪吃蛇》
- 创建多个设备文件节点_使用DEVICE_ATTR实例分析
- Makefile教程(绝对经典,所有问题看这一篇足够了)
- 数据库索引怎么实现的
- Centos7 日志查看工具journalctl 使用
- Python高级配色 RGB
- Java StackTraceElement源码总结 StackTraceElement源码注释翻译和解析中英文对照版
- 2021上海酵素展暨中国酵素节资讯食用酵素的营养功效及研究进展
- mac os 电脑利用VMware虚拟机安装Centos7搭建Linux小集群
- 轻松搞定Linux环境变量
- can总线短距离不用双绞线_can总线(一)物理层—屏蔽双绞线
- 深度爆料——剖析揭露IT培训行业黑幕
- CMU 15-445实验记录(三):Project 2 B+Tree的插入与删除
热门文章
- boost::log::formatting_ostream用法的测试程序
- boost::hana::max用法的测试程序
- boost::geometry::remove_spikes用法的测试程序
- boost::local_time模块实现自纪元以来的秒数的测试程序
- ITK:重新缩放图像
- ITK:在图像中查找连接的组件
- DCMTK:OFStandard中“转换为标记”代码的测试程序
- VTK:PolyData之GeometryFilter
- VTK:绘图之BarChart
- VTK:图表之BoostBreadthFirstSearchTree