JQuery Easy Ui loadable combo box-ComboBox

loadable combo Box-ComboBox

Inherit from $.fn.combo.defaults, overriding default values by $.fn.combobox.defaults

The ComboBox displays a text box and a drop-down list that you can edit. Allows the user to select one or more values from the inside, the user can enter the value directly to the top of the list, or you can select one or more existing values from the list.

Dependencies

• Combo

How to use (usage Example)

Creates a ComboBox from the <select> element and a predefined structure.

2. <select id="cc" class="Easyui-combobox" name="dept" style="width:200px;" >
4. <option value="AA">aitem1</option>
6. <option>bitem2</option>
8. <option>bitem3</option>
10. <option>ditem4</option>
12. <option>eitem5</option>
14. </Select>

Create a ComboBox from the <input> tag.

1. <input id="CC" class= "easyui-combobox" name="Dept "
2. data-options="Valuefield: ' id ', TextField: ' text ', url: ' get_data.php '" />

Create a ComboBox using JavaScript

1. <input id="CC" name= "dept" value="AA">

1. $ (' #cc '). ComboBox ({
2. URL:' Combobox_data.json ',
3. Valuefield:' id ',
4. TextField:' text '
5. });

Create a two dependent ComboBox

2. <input id="cc1" class= "easyui-combobox" data-options= "
4. Valuefield: ' id ',
6. TextField: ' Text ',
8. URL: ' get_data1.php ',
10. Onselect:function (REC) {
12. var url = ' get_data2.php?id= ' +rec.id;
14. $ (' #cc2 '). ComboBox (' reload ', url);
16. } " />
18. <input id="CC2" class="Easyui-combobox" data-options="Valuefield: ' id ', TextField: ' Text ' " />

JSON Data Transformation Example:

2. [{
4. "id": 1,
6. "text":"Text1"
8. },{
10. "id": 2,
12. "text":"Text2"
14. },{
16. "id": 3,
18. "text":"Text3",
20. "selected":true
22. },{
24. "id": 4,
26. "text":"Text4"
28. },{
30. "id": 5,
32. "text":"Text5"
34. }]

Properties

These properties are inherited to combo, and the following are some of the new properties of the ComboBox.

Name	Type	Description	Default
Valuefield	String	The name of the underlying data value bound to this ComboBox.	Value
TextField	String	The name of the data field bound to this ComboBox.	Text
Mode	String	Defines how the display list data is loaded when the text changes. If you set the ' remote ' ComboBox to load data from a remote server. When set to ' remote ' mode, the user input information is sent as an HTTP request parameter, and the parameter name ' Q ' to the server to retrieve the new data.	Local
Url	String	A URL that loads list data from a remote server.	Null
Method	String	The HTTP request method for retrieving data.	Post
Data	Array	The data that needs to be loaded into the list. Example code: <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	Defines how local data is filtered when ' mode ' is set to ' locally '. This function provides two parameters: Q: Text entered by the user. Row: The line data for the list. Returns true to allow rows to be displayed. Example code: $ (' #cc '). ComboBox ({filter:function (q, Row) {var opts = $ (this). ComboBox (' Options '); return Row[opts.textfield]. IndexOf (q) = = 0;}});
Formatter	function	Defines how rows are rendered. This function provides a parameter: row. Example code: $ (' #cc '). ComboBox ({formatter:function (row) {var opts = $ (this). ComboBox (' Options '); return Row[opts.textfield];}});
Loader	function (Param,success,error)	Defines how data is loaded from a remote server. Returns false to terminate this action. This function provides parameters: PARAM: A Parameter object passed to the remote server. Success (data): This callback function will be called when the data is retrieved successfully. Error (): This function will be called when retrieving data fails (exception, instead of returning empty data).	JSON loader

Events

Event is inherited to Combo, the following is the new event for the ComboBox.

Name	Parameters	Description
Onbeforeload	Param	A request is triggered before the data is loaded and returns false to cancel the load action. Example code: Change the request parameter $ (' #cc ') before loading the data from the remote server. ComboBox ({onbeforeload:function (param) {param.id = 2;param.language = ' js ';}});
Onloadsuccess	None	triggered when the remote data load succeeds.
Onloaderror	None	Remote Data load error triggered.
OnSelect	Record	Triggered when the user selects a list item.
Onunselect	Record	Triggered when the user cancels the selection of a list item.

Methods

Method is inherited to combo, the following is a new or overridden method of the ComboBox.

Name	Parameter	Description
Options	None	Returns the Options object.
GetData	None	Returns the loaded data.
LoadData	Data	Returns the local list data.
Reload	Url	Requests remote server list data. The incoming ' URL ' parameter overrides the original URL value. Example code: $ (' #cc '). ComboBox (' Reload '); Reload the list data $ (' #cc ') using the original URL. ComboBox (' Reload ', ' get_data.php '); Reload list data with a new URL
Setvalues	Values	Sets an array of ComboBox values. Example code: $ (' #cc '). ComboBox (' Setvalues ', [' 001 ', ' 002 ']);
SetValue	Value	Sets the ComboBox value. Example code: $ (' #cc '). ComboBox (' Setvalues ', ' 001 ');
GetValue	Nome	Returns the selected value
Clear	None	Clears the ComboBox value.
Select	Value	Select a specific item.
Unselect	Value	Cancels a specific selection.
$ (' #Id '). Combogrid (' Grid '). DataGrid (' Selectrecord ', value values); Used to set the default check $ (' #goodsSelect '). Combogrid (' Grid '). DataGrid ("Clearselections"); Clear selection

Original: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869888.html

JQuery Easy Ui loadable combo box-ComboBox