JQuery Easy Ui 可装载组合框 - ComboBox
来源:互联网 发布:平安证券java面试 编辑:程序博客网 时间:2024/05/17 23:40
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。
如有冒犯请联系本人,或删除,或标明出处。
因为好的文章,以前只想收藏,但连接有时候会失效,所以现在碰到好的直接转到自己这里。
原文 出处http://write.blog.csdn.net/postlist
可装载组合框 - 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的一些新增属性.
示例代码:
<input class="easyui-combobox" data-options="valueField: 'label',textField: 'value',data: [{label: 'java',value: 'Java'},{label: 'perl',value: 'Perl'},{label: 'ruby',value: 'Ruby'}]" />nullfilterfunction定义如何过滤本地数据,当'mode'设置为'local'的时候. 这个函数提供两个参数:
q: 用户输入的文本.
row: 列表的行数据.
返回true 允许行显示 .
示例代码:
$('#cc').combobox({filter: function(q, row){var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) == 0;}});formatterfunction定义如何呈现行. 这个函数提供一个参数 :row.
示例代码:
$('#cc').combobox({formatter: function(row){var opts = $(this).combobox('options');return row[opts.textField];}});loaderfunction(param,success,error)定义如何从远程服务器加载数据. 返回false终止这个动作.这个函数提供一下参数:
param:传递给远程服务器的参数对象.
success(data): 当检索数据成功这个回调函数将被调用.
error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用.json loader
Events
事件继承至 combo, 以下是combobox的新增事件.
示例代码:
// 在从远程服务器加载数据之前改变请求参数$('#cc').combobox({onBeforeLoad: function(param){param.id = 2;param.language = 'js';}});onLoadSuccessnone当远程数据加载成功之后触发.onLoadErrornone远程数据加载出错触发.onSelectrecord当用户选择一个列表项的时候触发.onUnselectrecord当用户取消选择一个列表项的时候触发.
Methods
方法继承至 combo,以下是combobox的新增的或者是重写的方法.
示例代码:
$('#cc').combobox('reload'); //使用原始URL重新加载列表数据$('#cc').combobox('reload','get_data.php'); //使用新的URL重新加载列表数据setValuesvalues设置 combobox 值数组.
示例代码:
$('#cc').combobox('setValues', ['001','002']);setValuevalue设置 combobox 值.
示例代码:
$('#cc').combobox('setValues', '001');clearnone清除 combobox 值.selectvalue选择特定的项.unselectvalue取消特定的选择项.
$('#Id').combogrid('grid').datagrid('selectRecord',value值); 用来设置默认选中
$('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除选择
0 0
- JQuery Easy Ui 可装载组合框 - ComboBox
- Jquery easy UI combobox
- jquery easy ui 中的 combobox 使用方法
- jquery easy ui ComboBox 内容过滤
- Jquery easy ui combobox 的使用
- Easy ui Combobox,easy ui datagrid Combobox
- Easy UI Combobox 操作
- easy-ui combobox
- Easy-UI combobox使用
- jQuery EasyUI 组合框(ComboBox)
- jQuery EasyUI - ComboBox组合框
- jquery easy ui的Combobox的绑定 $.post +webservices
- easy ui combobox 相关问题
- jQuery Easy UI Accordion(可伸缩面板)组件
- Easy ui combobox,清空下拉框的按钮
- easy ui 可编辑datagrid 动态生成combobox 和动态计算机连个numberbox 中的值
- jQuery Easy UI Tooptip(提示框)组件
- Jquery Easy UI
- select 设置发送超时发送注意事项
- hibernate
- Cracking The Coding Interview 3.6
- javascript判断输入的url是否正确
- 日志清理.sh
- JQuery Easy Ui 可装载组合框 - ComboBox
- 黑马程序员-有关银行调度系统的笔记和总结
- cocos2d-x-2.1.4如何创建新工程
- 打开MySQL远程登陆的功能
- Oracle数据库中的varchar,varchar2,nvarchar,nvarchar2区别及用法
- 驱动程序与应用程序之间的通信
- js传递给NPAPI插件的字符串参数在Firefox下正常,在chrome下面会有乱码现象的问题解决
- 《基于ORACLE的SQL优化读书》笔记 得到绑定变量值
- C与C++的区别