JQuery Easy Ui 可装载组合框 - ComboBox
可装载组合框 - ComboBox
继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值
combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.
Dependencies
- combo
使用方法(Usage Example)
从<select>元素和一个预定义结构创建combobox.
- <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>标记创建combobox.
- <input id="cc" class="easyui-combobox" name="dept"
- data-options="valueField:'id',textField:'text',url:'get_data.php'" />
使用javascript创建combobox
- <input id="cc" name="dept" value="aa">
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
创建两个依赖的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);
- }" />
- <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"
- }]
Properties
这些属性继承至 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=" |
null |
filter | function | 定义如何过滤本地数据,当'mode'设置为'local'的时候. 这个函数提供两个参数: q: 用户输入的文本. row: 列表的行数据. 返回true 允许行显示 . 示例代码: $('#cc').combobox({ |
|
formatter | function | 定义如何呈现行. 这个函数提供一个参数 :row.
示例代码: $('#cc').combobox({ |
|
loader | function(param,success,error) | 定义如何从远程服务器加载数据. 返回false终止这个动作.这个函数提供一下参数: param:传递给远程服务器的参数对象. success(data): 当检索数据成功这个回调函数将被调用. error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用. |
json loader |
Events
事件继承至 combo, 以下是combobox的新增事件.
Name | Parameters | Description |
---|---|---|
onBeforeLoad | param | 一个请求在加载数据之前触发,返回false取消这个加载动作.
示例代码: // 在从远程服务器加载数据之前改变请求参数 |
onLoadSuccess | none | 当远程数据加载成功之后触发. |
onLoadError | none | 远程数据加载出错触发. |
onSelect | record | 当用户选择一个列表项的时候触发. |
onUnselect | record | 当用户取消选择一个列表项的时候触发. |
Methods
方法继承至 combo,以下是combobox的新增的或者是重写的方法.
Name | Parameter | Description |
---|---|---|
options | none | 返回 options 对象. |
getData | none | 返回加载数据. |
loadData | data | 返回本地列表数据. |
reload | url | 请求远程服务器列表数据.传入'url'参数重写原始的URL值.
示例代码: $('#cc').combobox('reload'); //使用原始URL重新加载列表数据 |
setValues | values | 设置 combobox 值数组.
示例代码: $('#cc').combobox('setValues', ['001','002']); |
setValue | value | 设置 combobox 值.
示例代码: $('#cc').combobox('setValues', '001'); |
getValue | nome | 返回选中的值 |
clear | none | 清除 combobox 值. |
select | value | 选择特定的项. |
unselect | value | 取消特定的选择项. |
$('#Id').combogrid('grid').datagrid('selectRecord',value值); 用来设置默认选中 $('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除选择 |
原文:http://www.cnblogs.com/cnjava/archive/2013/01/21/2869888.html
JQuery Easy Ui 可装载组合框 - ComboBox的更多相关文章
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- JQuery Easy Ui (Tree树)详解(转)
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- jQuery Easy UI LinkButton(button)包
LinkButton(button)包,easyui其中一个基本组成部分 演示样例: <!DOCTYPE html> <html> <head> <title ...
随机推荐
- iOS开发----音频播放、录音、视频播放、拍照、视频录制
随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像头的操 ...
- 【BZOJ-2768】冠军调查 最小割
2768: [JLOI2010]冠军调查 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 971 Solved: 661[Submit][Status ...
- 【BZOJ-2937】建造酿酒厂 前缀和 + 展环为链 + 乱搞
2937: [Poi2000]建造酿酒厂 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 70 Solved: 24[Submit][Status][D ...
- 【bzoj2245】 SDOI2011—工作安排
http://www.lydsy.com/JudgeOnline/problem.php?id=2245 (题目链接) 题意 n个产品,每个需要造C[i]件:m个员工,每个员工可以制造一些产品:每个员 ...
- BZOJ1040 [ZJOI2008]骑士
Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各 界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战 ...
- HTML/HTML5/CSS/CSS3教程速查手册地址以及如何快速直到webkit的用法
http://www.w3school.com.cn/ http://www.runoob.com/ 不过上面这两个都是标准的CSS和CSS3教程,针对一些类似-webkit-内核的样式没有公布. 下 ...
- VS联调多个解决方案的项目
一.项目中经常出现一个解决方案里面有多个程序,如果想按F5启动多个实例进行操作调试那该怎么操作? 以前自己都使用附加进程的方法调试,这样的调试不需要按F5,自己只要运行多个程序后,使用vs的附加进程到 ...
- 20150706 test2
净心守志:可会至道.譬如磨镜:垢去明存.断欲无求:当得宿命
- linux: shell常用指令归纳
1.软件安装方式: 1)源码安装: ~ wget xxxxxx ~ ./configure ~ make ~ make install 2) yum: ~ yum search : 查找软件包 ~ y ...
- 在浏览器中直接生成 PDF
well, 如果有人在准备开发一个浏览器端的 PDFCreator,那么,你需要知道的是,已经有人在这么做了.不过,他的做法显然更靠谱一些——先开发一个可以将基本元素放入 PDF 的库.太简单?no! ...