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刪除。