Jquery combobox api及项目中用到的

ComboBox

Extend from $.fn.combo.defaults. Override defaults with $.fn.combobox.defaults.

The combobox display a editable text box and drop-down list, from which the user can select one or multiple values.The user can type text directly into the top of list, or select one or more of present values from the list.

Dependencies

• combo

Usage Example

Create combobox from <select> element with a pre-defined structure.

<ol class="linenums"><li class="L0"><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"dept"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span></li><li class="L1"><span class="pln">    </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"aa"</span><span class="tag">></span><span class="pln">aitem1</span><span class="tag"></option></span></li><li class="L2"><span class="pln">    </span><span class="tag"><option></span><span class="pln">bitem2</span><span class="tag"></option></span></li><li class="L3"><span class="pln">    </span><span class="tag"><option></span><span class="pln">bitem3</span><span class="tag"></option></span></li><li class="L4"><span class="pln">    </span><span class="tag"><option></span><span class="pln">ditem4</span><span class="tag"></option></span></li><li class="L5"><span class="pln">    </span><span class="tag"><option></span><span class="pln">eitem5</span><span class="tag"></option></span></li><li class="L6"><span class="tag"></select></span></li></ol>

Create combobox from <input> markup.

<ol class="linenums"><li class="L0"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"dept"</span></li><li class="L1"><span class="pln">    </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"valueField:'id',textField:'text',url:'get_data.php'"</span><span class="tag">></span></li></ol>

Create combobox using javascript.

<ol class="linenums"><li class="L0"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"dept"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"aa"</span><span class="tag">></span></li></ol>

<ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#cc'</span><span class="pun">).</span><span class="pln">combobox</span><span class="pun">({</span></li><li class="L1"><span class="pln">    url</span><span class="pun">:</span><span class="str">'combobox_data.json'</span><span class="pun">,</span></li><li class="L2"><span class="pln">    valueField</span><span class="pun">:</span><span class="str">'id'</span><span class="pun">,</span></li><li class="L3"><span class="pln">    textField</span><span class="pun">:</span><span class="str">'text'</span></li><li class="L4"><span class="pun">});</span></li></ol>

Create two dependent comboboxes.

<ol class="linenums"><li class="L0"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"</span></li><li class="L1"><span class="atv">        valueField: 'id',</span></li><li class="L2"><span class="atv">        textField: 'text',</span></li><li class="L3"><span class="atv">        url: 'get_data1.php',</span></li><li class="L4"><span class="atv">        onSelect: function(rec){</span></li><li class="L5"><span class="atv">            var url = 'get_data2.php?id='+rec.id;</span></li><li class="L6"><span class="atv">            $('#cc2').combobox('reload', url);</span></li><li class="L7"><span class="atv">        }"</span><span class="tag">></span></li><li class="L8"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"valueField:'id',textField:'text'"</span><span class="tag">></span></li></ol>

The json data format sample:

<ol class="linenums"><li class="L0"><span class="pun">[{</span></li><li class="L1"><span class="pln">    </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">1</span><span class="pun">,</span></li><li class="L2"><span class="pln">    </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text1"</span></li><li class="L3"><span class="pun">},{</span></li><li class="L4"><span class="pln">    </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">2</span><span class="pun">,</span></li><li class="L5"><span class="pln">    </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text2"</span></li><li class="L6"><span class="pun">},{</span></li><li class="L7"><span class="pln">    </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">3</span><span class="pun">,</span></li><li class="L8"><span class="pln">    </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text3"</span><span class="pun">,</span></li><li class="L9"><span class="pln">    </span><span class="str">"selected"</span><span class="pun">:</span><span class="kwd">true</span></li><li class="L0"><span class="pun">},{</span></li><li class="L1"><span class="pln">    </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">4</span><span class="pun">,</span></li><li class="L2"><span class="pln">    </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text4"</span></li><li class="L3"><span class="pun">},{</span></li><li class="L4"><span class="pln">    </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">5</span><span class="pun">,</span></li><li class="L5"><span class="pln">    </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text5"</span></li><li class="L6"><span class="pun">}]</span></li></ol>

Properties

The properties extend from combo, below is the added properties for combobox.

Name	Type	Description	Default
valueField	string	The underlying data value name to bind to this ComboBox.	value
textField	string	The underlying data field name to bind to this ComboBox.	text
groupField	string	Indicate what field to be grouped. Available since version 1.3.4.	null
groupFormatter	function(group)	return group text to display on group item. Available since version 1.3.4. Code example: $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; } });
mode	string	Defines how to load list data when text changed.Set to 'remote' if the combobox loads from server.When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data.	local
url	string	A URL to load list data from remote.	null
method	string	The http method to retrieve data.	post
data	array	The list data to be loaded. Code example: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />	null
queryParams	object	The additional parameters that will be sent to server when requesting remote data.Available since version 1.4.2.	{}
showItemIcon	boolean	True to display icon of the selected item on the textbox.Available since version 1.4.5.	false
groupPosition	string	The item group position, possible values are: 'static' and 'sticky'.Set this property to 'sticky' to stick the item group to the top of drop-down panel.Available since version 1.4.5.	static
filter	function	Defines how to filter the local data when 'mode' is set to 'local'. The function takes two parameters: q: the user typed text. row: the list row data. Return true to allow the row to be displayed. Code example: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });
formatter	function	Defineds how to render the row. The function takes one parameter: row. Code example: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });
loader	function(param,success,error)	Defines how to load data from remote server. Return false can abort this action.This function takes following parameters: param: the parameter object to pass to remote server. success(data): the callback function that will be called when retrieve data successfully. error(): the callback function that will be called when failed to retrieve data.	json loader
loadFilter	function(data)	Return the filtered data to display. Available since version 1.3.3.

Events

The events extend from combo, below is the added events for combobox.

Name	Parameters	Description
onBeforeLoad	param	Fires before a request is made to load data, return false to cancel this load action. Code example: // change the http request parameters before load data from server $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	Fires when remote data is loaded successfully.
onLoadError	none	Fires when remote data load error.
onChange	newValue,oldValue	Fires when the field value is changed.
onSelect	record	Fires when the user select a list item.
onUnselect	record	Fires when the user unselect a list item.

Methods

The methods extend from combo, below is the added or overridden methods for combobox.

Name	Parameter	Description
options	none	Return the options object.
getData	none	Return the loaded data.
loadData	data	Load the locale list data.
reload	url	Request the remote list data. Pass the 'url' parameter to override the original URL value. Code example: $('#cc').combobox('reload'); // reload list data using old URL $('#cc').combobox('reload','get_data.php'); // reload list data using new URL
setValues	values	Set the combobox value array. Code example: $('#cc').combobox('setValues', ['001','002']);
setValue	value	Set the combobox value. Code example: $('#cc').combobox('setValue', '001');
clear	none	Clear the combobox value.
select	value	Select the specified item.
unselect	value	Unselect the specified item.