JQuery EasyUI combobox(下拉列表框)
下拉列表框
继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults.
组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值。用户可以直接输入文本到顶部的列表,或选择一个或多个当前值列表。
依赖
应用实例
从<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" |
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请求从服务器加载数据之前 |
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'); |
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 级联及触发事件,combobox级联
jquery easyui combobox 级联及触发事件,combobox级联 >>>>>>>>>>>>>>&g ...
- JQuery EasyUI Combobox的onChange事件
html中的select 的change事件 <select id="consult_province" name="consult_province" ...
- jQuery EasyUI Combobox无法检索中文输入的问题
在项目里使用了EasyUI的Combobox,当ComboBox的item是英文时,都能正常检索出对应项,但是如果使用中文输入法输入几个字母然后通过按shift键输入时,奇怪的事情发生了,combob ...
- jquery easyui combobox学习
今天尝试了一下jquery easy ui的combobox,感觉蛮好用的,直接上代码吧 HTML如下 <div> <input id="btnBind" typ ...
- jQuery easyui combobox获取值|easyui-combobox获取多个值
Query easyui combobox事例: name="language" data-options=" ...
- JQuery EasyUI Combobox 实现省市二级联动菜单
//编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...
- jQuery easyui combobox级联及内容联想
1.需求:已有一个下拉框A表示地区,现新增需求,需要在A选择不同地区时,增加一个展示该地区所有城市的下拉框B, 由于城市较多,要求B能实现用户输入和模糊匹配展示功能. 2.实现: (1)首先在A下面把 ...
- jQuery EasyUI Combobox 无法获取属性 options 的值: 对象为 null 或未定义
错误的写法: $('#combobox1').combobox({ valueField: 'id', textField: 'text',data:[{id:1,text:'蚂蚁小羊'}]}); 正 ...
- jquery easyui Combobox 实现 两级联动
具体效果如下图:
随机推荐
- JSONObject转换分析
net.sf.json.JSONObject采用反射的方式,对POJO进行转换.JSONObject类实现了JSON.Map和Comparable接口,如下: class JSONObject ext ...
- 字符串的最长回文串:Manacher’s Algorithm
题目链接:Longest Palindromic Substring 1. 问题描述 Given a string S, find the longest palindromic substring ...
- Mysql锁机制--间隙锁的危害
Mysql 系列文章主页 =============== 1 准备数据 1.1 建表 DROP TABLE IF EXISTS employee; CREATE TABLE IF NOT EXISTS ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- WMI远程启动软件(某个应用程序)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.M ...
- UDP网络编程
概念: UDP协议(用户数据报协议)是无连接,不可靠的,无序的.速度比较快, UDP协议以数据报作为数据传输的载体 进行数据传输时,首先将传输的数据定义成数据报(Datagram),在数据报中指明数据 ...
- Helm 架构 - 每天5分钟玩转 Docker 容器技术(161)
在实践之前,我们先来看看 Helm 的架构. Helm 有两个重要的概念:chart 和 release. chart 是创建一个应用的信息集合,包括各种 Kubernetes 对象的配置模板.参数定 ...
- Android隐式启动Activity可能存在的坑
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 本篇文章,对隐式启动Activity再做分析. 有些人可能会说了, ...
- Most Common Solutions to FRM-41839 and .tmp Files Not Being Deleted
In this Document Symptoms Changes Cause Solution References APPLIES TO: Oracle Application ...
- PGM:部分有向模型之条件随机场与链图模型
http://blog.csdn.net/pipisorry/article/details/52529287 贝叶斯网与马尔可夫网 [PGM:无向图模型:马尔可夫网]中例3.8和例4.8显示,贝叶斯 ...