标签:local ram 显示 body required load efault life 定义
Combobox用法和方法参数:
1、 需要引入class=" easyui-combobox”
2、 参数设置需要在data-options中设置
3、 属性参数配置:
valueField:基础数据值名称绑定到Combobox(提交值)
textField:基础数据的字段名称绑定的Combobox(显示值)
mode:定义当文本改变时如何加载列表数据,当设置为remote模式下,什么类型的用户将被发送http请求参数名为‘q‘的服务器,以获取新的数据。
url:从远程URL来加载列表数据
method:http方法检索列表数据
data:列表中被加载的数据
filter:定义如何过滤本地数据“模式”设置为‘local‘
formatter:定义如何呈现行
loader:定义如何从远程服务器加载数据
4、 事件:
onBeforeLoad(param): 操作之前将数据加载,返回false就取消这个荷载作用
onLoadSuccess():触发时,远程数据加载成功
onLoadError:触发时,远程数据加载错误
ONSELECT:触发,当用户选择一个列表项
onUnselect:触发,当用户取消选择一个列表
5、方法:
options():返回选择对象
getData():返回加载的数据
loadData(data):加载列表数据
reload(url):重新加载远程数据列表
setValues(values):设置combobox的值数组
setValue(value):设置combobox的值
clear():清空combobox的值
select(value):选中指定的值
unselect(value):取消指定的值
代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>combobox</title> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <script type="text/JavaScript" src="jQuery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <script type="text/javascript"> //动态加载数据集文件数据 function loadData(){ $(‘#cc‘).combobox({ url:‘combobox_data.json‘, valueField:‘id‘, textField:‘text‘ }); } //设置下拉框的值 function setValue(){ $("#cc").combobox("setValue","动态添加的列表值"); } //获取当前选择的值 function getValue(){ var selectText=$("#cc").combobox("getValue"); alert("当前选择的是:"+selectText); } //禁用当前选择框 function disable(){ $("#cc").combobox("disable"); } //启用当前选择框 function enable(){ $("#cc").combobox("enable"); } $(‘#cc1‘).combobox({ filter: function(q, row){ var opts = $(this).combobox(‘options‘); return row[opts.textField].indexOf(q) == 0; }, formatter: function(row){ var opts = $(this).combobox(‘options‘); return row[opts.textField]; } }); </script> </head> <body> <h2>ComboBox</h2> <div style="margin:10px 0;"> <a href="#" class="easyui-linkbutton" onclick="loadData()">LoadData</a> <a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a> <a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a> <a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a> <a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a> </div> <p>单项选择的ComboBox: </p> <select id="cc" class="easyui-combobox" name="state" style="width:200px;" data-options="required:true,width:150"> <option value="AL">Alabama</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH" selected>Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> </select> <br/> <p>本地数据源的Combobox</p> <input class="easyui-combobox" id="cc1" data-options="valueField:‘lable‘,textField:‘value‘, data:[{ lable:‘Java‘, value:‘java‘ }, { lable:‘liferay‘, value:‘liferay‘ }, { lable:‘jiar‘, value:‘jiar‘ }, { lable:‘ruby‘, value:‘ruby‘ } ]"/> <br /> <p>来源网页数据的Combobox</p> <input class="easyui-combobox" id="cc2" data-options=" valueField: ‘id‘, textField: ‘text‘,url: ‘get_data1.PHP‘, onSelect: function(rec){ var url = ‘get_data2.php?id=‘+rec.id; $(‘#cc3‘).combobox(‘reload‘, url); }" /> <input id="cc3" class="easyui-combobox" data-options="valueField:‘id‘,textField:‘text‘" /> <br/> <p>多项选择的ComboBox: </p> <select id="cc4" class="easyui-combobox" name="state" style="width:200px;" data-options="url:‘combobox_data.json‘, valueField:‘id‘, textField:‘text‘, multiple:true, panelHeight:‘auto‘ "/> </body> </html>
标签:local ram 显示 body required load efault life 定义
原文地址:http://www.cnblogs.com/goloving/p/7115792.html