場(chǎng)景

效果

用法

從帶有預(yù)定義結(jié)構(gòu)的 <select> 元素創(chuàng)建組合框（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> 標(biāo)記創(chuàng)建組合框（combobox）。

<input id="cc" class="easyui-combobox" name="dept"data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用 javascript 創(chuàng)建組合框（combobox）。

<input id="cc" name="dept" value="aa">$('#cc').combobox({url:'combobox_data.json',valueField:'id',textField:'text'});

創(chuàng)建兩個(gè)依賴(lài)的組合框（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 數(shù)據(jù)格式的示例：

[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]

屬性

該屬性擴(kuò)展自組合（combo），下面是為組合框（combobox）添加的屬性。

名稱(chēng)類(lèi)型描述默認(rèn)值

valueField	string	綁定到該組合框（ComboBox）的 value 上的基礎(chǔ)數(shù)據(jù)的名稱(chēng)。	value
textField	string	綁定到該組合框（ComboBox）的 text 上的基礎(chǔ)數(shù)據(jù)的名稱(chēng)。	text
groupField	string	指示要被分組的字段。該屬性自版本 1.3.4 起可用。	null
groupFormatter	function(group)	返回要顯示在分組項(xiàng)目上的分組文本。該屬性自版本 1.3.4 起可用。 代碼實(shí)例： $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; } });	?
mode	string	定義在文本改變時(shí)如何加載列表數(shù)據(jù)。如果組合框（combobox）從服務(wù)器加載就設(shè)置為 'remote'。當(dāng)設(shè)置為 'remote' 模式時(shí)，用戶(hù)輸入的值將會(huì)被作為名為 'q' 的 http 請(qǐng)求參數(shù)發(fā)送到服務(wù)器，以獲取新的數(shù)據(jù)。	local
url	string	從遠(yuǎn)程加載列表數(shù)據(jù)的 URL 。	null
method	string	用來(lái)檢索數(shù)據(jù)的 http 方法。	post
data	array	被加載的列表數(shù)據(jù)。 代碼實(shí)例： <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	定義當(dāng) 'mode' 設(shè)置為 'local' 時(shí)如何過(guò)濾本地?cái)?shù)據(jù)。該函數(shù)有兩個(gè)參數(shù)： q：用戶(hù)輸入的文本。 row：列表中的行數(shù)據(jù)。 返回 true 則允許顯示該行。 代碼實(shí)例： $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });	?
formatter	function	定義如何呈現(xiàn)行。該函數(shù)有一個(gè)參數(shù)：row。 代碼實(shí)例： $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });	?
loader	function(param,success,error)	定義如何從遠(yuǎn)程服務(wù)器加載數(shù)據(jù)。返回 false 則取消該動(dòng)作。該函數(shù)有下列參數(shù)： param：要傳到遠(yuǎn)程服務(wù)器的參數(shù)對(duì)象。 success(data)：當(dāng)獲取數(shù)據(jù)成功時(shí)將被調(diào)用的回調(diào)函數(shù)。 error()：當(dāng)獲取數(shù)據(jù)失敗時(shí)將被調(diào)用的回調(diào)函數(shù)。	json loader
loadFilter	function(data)	返回要顯示的過(guò)濾數(shù)據(jù)。該屬性自版本 1.3.3 起可用。	?

事件

該事件擴(kuò)展自組合（combo），下面是為組合框（combobox）添加的事件。

名稱(chēng)參數(shù)描述

onBeforeLoad	param	在請(qǐng)求加載數(shù)據(jù)之前觸發(fā)，返回 false 則取消加載動(dòng)作。 代碼實(shí)例： // change the http request parameters before load data from server $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	當(dāng)遠(yuǎn)程數(shù)據(jù)加載成功時(shí)觸發(fā)。
onLoadError	none	當(dāng)遠(yuǎn)程數(shù)據(jù)加載失敗時(shí)觸發(fā)。
onSelect	record	當(dāng)用戶(hù)選擇一個(gè)列表項(xiàng)時(shí)觸發(fā)。
onUnselect	record	當(dāng)用戶(hù)取消選擇一個(gè)列表項(xiàng)時(shí)觸發(fā)。

方法

該方法擴(kuò)展自組合（combo），下面是為組合框（combobox）添加或重寫(xiě)的方法。

名稱(chēng)參數(shù)描述

options	none	返回選項(xiàng)（options）對(duì)象。
getData	none	返回加載的數(shù)據(jù)。
loadData	data	加載本地列表數(shù)據(jù)。
reload	url	請(qǐng)求遠(yuǎn)程的列表數(shù)據(jù)。傳 'url' 參數(shù)來(lái)重寫(xiě)原始的 URL 值。 代碼實(shí)例： $('#cc').combobox('reload'); // reload list data using old URL $('#cc').combobox('reload','get_data.php'); // reload list data using new URL
setValues	values	設(shè)置組合框（combobox）值的數(shù)組。 代碼實(shí)例： $('#cc').combobox('setValues', ['001','002']);
setValue	value	設(shè)置組合框（combobox）的值。 代碼實(shí)例： $('#cc').combobox('setValue', '001');
clear	none	清除組合框（combobox）的值。
select	value	選擇指定的選項(xiàng)。
unselect	value	取消選擇指定的選項(xiàng)。

?

實(shí)現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <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> </body> </html>

?

總結(jié)

以上是生活随笔為你收集整理的EasyUI中Combox组合框的简单使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。