JQuery Easy Ui 可裝載組合框 - ComboBox

可裝載組合框 - 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">

js

$('#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');
clear	none	清除 combobox 值.
select	value	選擇特定的項.
unselect	value	取消特定的選擇項.
		$('#Id').combogrid('grid').datagrid('selectRecord',value值); 用來設置默認選中 $('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除選擇