場景

效果

用法

從帶有預(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è)依賴的組合框（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）添加的屬性。

名稱類型描述默認(rèn)值

valueField	string	綁定到該組合框（ComboBox）的 value 上的基礎(chǔ)數(shù)據(jù)的名稱。	value
textField	string	綁定到該組合框（ComboBox）的 text 上的基礎(chǔ)數(shù)據(jù)的名稱。	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í)，用戶輸入的值將會(huì)被作為名為 'q' 的 http 請(qǐng)求參數(shù)發(fā)送到服務(wù)器，以獲取新的數(shù)據(jù)。	local
url	string	從遠(yuǎn)程加載列表數(shù)據(jù)的 URL 。	null
method	string	用來檢索數(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í)如何過濾本地?cái)?shù)據(jù)。該函數(shù)有兩個(gè)參數(shù)： q：用戶輸入的文本。 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)	返回要顯示的過濾數(shù)據(jù)。該屬性自版本 1.3.3 起可用。	?

事件

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

名稱參數(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)用戶選擇一個(gè)列表項(xiàng)時(shí)觸發(fā)。
onUnselect	record	當(dāng)用戶取消選擇一個(gè)列表項(xiàng)時(shí)觸發(fā)。

方法

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

名稱參數(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ù)來重寫原始的 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组合框的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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