EasyUI中combobox的使用方法和一个代码实例


一、easyUI中select下拉框动态添加option选项

  问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功。因为jquery easyui的下拉列表combobox是用DIV模拟的(其实看看它的样式就应该想到)

  解决方法:

  1、一个空下拉框,注意不能加class="easyui-combobox",否则不生效

<select class="timeJ " id="selectInfo1" panelheight="auto" editable="false" style="width:220px;">
</select>
//注意class不能加easyui-combobox

  2、为下拉框添加子项:利用文档碎片

var fragment = document.createDocumentFragment(); for(var i=1;i<25;i++){ var option = document.createElement("option"); option.innerHTML = i + ""; $(option).attr("value",i); fragment.appendChild(option); } $("#selectInfo1").append(fragment); $("#selectInfo1").combobox({});

  3、将下拉框转化为easyUI中的combobox

$("#selectInfo1").combobox({});

  只要填充好数据,再去转化那就可以了。

二、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:定义如何从远程服务器加载数据

常用属性:

 <td>
   <select id="usbLabel" class="easyui-combobox"  name="labelList" style="width:285px;" panelHeight="150px" panelWidth="285px" editable="false">
       <s:iterator value="#request.labelList" var="list"><option value="<s:property value="#list.name" />"><s:property  value="#list.name" /></option></s:iterator>
   </select>
   <label class="requiredLable">*</label>
</td>
//style:设置宽度样式之类 //panelWidth:设置下拉面板宽度 //panelHeight:设置下拉面板高度

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>
打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM