JQuery Easy Ui 可裝載組合框 - ComboBox - langtianya－IT工程師數位筆記本

文章出處

可裝載組合框 - ComboBox

繼承自$.fn.combo.defaults,通過$.fn.combobox.defaults覆蓋默認值

combobox顯示的是一個可以編輯的文本框和一個下拉列表.允許用戶從里面選擇一個或者是多個值,用戶可以直接輸入值到列表頂部,或者可以從列表選擇一個或多個現有值.

Dependencies

combo

使用方法（Usage Example）

從<select>元素和一個預定義結構創建combobox.

<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"
}]

Properties

這些屬性繼承至 combo,下面是combobox的一些新增屬性.

Name	Type	Description	Default
valueField	string	綁定到這個combobox的基礎數據值名.	value
textField	string	綁定到這個combobox的數據字段名.	text
mode	string	當文本改變時定義如何加載顯示列表數據.如果設置為'remote' combobox從遠程服務器加載數據.當設置為'remote'模式時, 用戶輸入的信息將發送作為http請求參數,參數名為'q'到服務器檢索新的數據.	local
url	string	一個從遠程服務器加載列表數據的URL.	null
method	string	檢索數據的http請求方法.	post
data	array	需要加載到列表的數據. 示例代碼: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />	null
filter	function	定義如何過濾本地數據,當'mode'設置為'local'的時候. 這個函數提供兩個參數: q: 用戶輸入的文本. row: 列表的行數據. 返回true 允許行顯示 . 示例代碼: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });
formatter	function	定義如何呈現行. 這個函數提供一個參數 :row. 示例代碼: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });
loader	function(param,success,error)	定義如何從遠程服務器加載數據. 返回false終止這個動作.這個函數提供一下參數: param:傳遞給遠程服務器的參數對象. success(data): 當檢索數據成功這個回調函數將被調用. error():當檢索數據失敗(異常,而不是返回空數據的時候)這個函數將被調用.	json loader

Events

事件繼承至 combo, 以下是combobox的新增事件.

Name	Parameters	Description
onBeforeLoad	param	一個請求在加載數據之前觸發,返回false取消這個加載動作. 示例代碼: // 在從遠程服務器加載數據之前改變請求參數 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	當遠程數據加載成功之后觸發.
onLoadError	none	遠程數據加載出錯觸發.
onSelect	record	當用戶選擇一個列表項的時候觸發.
onUnselect	record	當用戶取消選擇一個列表項的時候觸發.

Methods

方法繼承至 combo,以下是combobox的新增的或者是重寫的方法.

Name	Parameter	Description
options	none	返回 options 對象.
getData	none	返回加載數據.
loadData	data	返回本地列表數據.
reload	url	請求遠程服務器列表數據.傳入'url'參數重寫原始的URL值. 示例代碼: $('#cc').combobox('reload'); //使用原始URL重新加載列表數據 $('#cc').combobox('reload','get_data.php'); //使用新的URL重新加載列表數據
setValues	values	設置 combobox 值數組. 示例代碼: $('#cc').combobox('setValues', ['001','002']);
setValue	value	設置 combobox 值. 示例代碼: $('#cc').combobox('setValues', '001');
getValue	nome	返回選中的值
clear	none	清除 combobox 值.
select	value	選擇特定的項.
unselect	value	取消特定的選擇項.
$('#Id').combogrid('grid').datagrid('selectRecord',value值); 用來設置默認選中 $('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除選擇