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>