easyUI ComboBox
来源:互联网 发布:sql求平均值的函数 编辑:程序博客网 时间:2024/06/05 00:16
combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.
相关依赖
- combo
使用示例
从<select>元素和一个预定义结构创建combobox
从<input>标记创建combobox
使用javascript创建combobox
创建两个依赖的combobox
json数据转换示例
Name Type Description Default valueFieldstring绑定到这个combobox的基础数据值名.valuetextFieldstring绑定到这个combobox的数据字段名.textmodestring当文本改变时定义如何加载显示列表数据.如果设置为'remote' combobox从远程服务器加载数据.当设置为'remote'模式时, 用户输入的信息将发送作为http请求参数,参数名为'q'到服务器检索新的数据.localurlstring一个从远程服务器加载列表数据的URL.nullmethodstring检索数据的http请求方法 .postdataarray需要加载到列表的数据.
q: 用户输入的文本.
row: 列表的行数据.
返回true 允许行显示 .
param:传递给远程服务器的参数对象.
success(data): 当检索数据成功这个回调函数将被调用.
error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用.json loader
Name Parameters Description onBeforeLoadparam一个请求在加载数据之前触发,返回false取消这个加载动作.
Name Parameter Description optionsnone返回 options 对象.getDatanone返回加载数据.loadDatadata返回本地列表数据.reloadurl请求远程服务器列表数据.传入'url'参数重写原始的URL值.
以上如果有错误信息,请指出,thanks!
<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" }]
属性
这些属性继承至 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
事件
事件继承至 combo, 以下是combobox的新增事件.
示例代码:
// 在从远程服务器加载数据之前改变请求参数$('#cc').combobox({onBeforeLoad: function(param){param.id = 2;param.language = 'js';}});onLoadSuccessnone当远程数据加载成功之后触发.onLoadErrornone远程数据加载出错触发.onSelectrecord当用户选择一个列表项的时候触发.onUnselectrecord当用户取消选择一个列表项的时候触发.
方法
方法继承至 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取消特定的选择项
以上如果有错误信息,请指出,thanks!
0 0
- easyUI ComboBox
- easyui---combobox
- easyui combobox
- easyui-combobox
- easyui-combobox
- EasyUI-Combobox
- easyUI combobox
- easyUI ComboBox
- easyui-combobox
- EasyUI--combobox
- easyui的easyui-combobox
- easyUI 格式化ComboBox
- easyui-combobox的案例
- easyUI combobox级联
- easyui combobox级联
- easyui combobox 使用汇总
- JQuery EasyUI Combobox联动
- easyUI combobox 置灰
- java中this的用法(1)
- CodeForces 484D Kindergarten
- IntelliJ IDEA 14本地仓库配置
- (转)Android JSON解析之JSONObject与GSON
- opengl顶点数组
- easyUI ComboBox
- sql优化的方法
- 前端HTML的meta设置-前端必看
- 任意结点对最短路问题——Floyd-Warshall算法
- Spring MVC的web.xml配置详解(转)
- LeetCode|Longest Substring Without Repeating Characters
- 网吧管理
- Python网络编程socket练习(TCP)
- 手机照片误删怎么恢复