Extended from $.fn.combo.defaults. Overrides the default defaults through $.fn.combobox.defaults.
The combo box (ComboBox) displays an editable text box and a drop-down list where the user can select one or more values from the drop-down list. Users can enter text directly to the top of the list, or select one or more existing values from the list.
Depend on
Usage
Creates a combo box (ComboBox) from the <select> element with a predefined structure.
<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>
Create a combo box (ComboBox) from the <input> tag.
<input id= "CC" class= "Easyui-combobox" name= "dept" data-options= "Valuefield: ' id ', TextField: ' text ', url: ' Get _data.php ' ">
Use JavaScript to create a combo box (ComboBox).
<input id= "CC" name= "dept" value= "AA" >
$ (' #cc '). ComboBox ({ URL: ' Combobox_data.json ', Valuefield: ' id ', textField: ' text '});
Create a two-dependent combo box (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 '" >
Examples of JSON data formats:
[{ "id": 1, "text": "Text1"},{ "id": 2, "text": "Text2"},{ "id": 3, "text": "Text3", " Selected ": true},{ " id ": 4, " text ":" Text4 "},{ " id ": 5, " text ":" Text5 "}]
Property
The property expands from the combination (combo), and the following is the property added for the combo box (ComboBox).
name |
type |
Description |
Default Value |
Valuefield |
String |
The name of the underlying data that is bound to value on the combo box (ComboBox). |
Value |
TextField |
String |
The name of the underlying data that is bound to the text on the combo box (ComboBox). |
Text |
GroupField |
String |
Indicates the field to be grouped. This property is available from version 1.3.4. |
Null |
Groupformatter |
function (Group) |
Returns the grouped text to be displayed on the grouped item. This property is available from version 1.3.4. code example:$ (' #cc '). ComboBox ({groupformatter:function (group) {return ' <span style= "color:red" > ' + group + ' </span> ';}}); |
|
Mode |
String |
Defines how the list data is loaded when the text changes. If the combo box (ComboBox) is loaded from the server, it is set to ' remote '. When set to ' remote ' mode, the value entered by the user will be sent to the server as an HTTP request parameter named ' Q ' to obtain new data. |
Local |
Url |
String |
The URL from the remote load list data. |
Null |
Method |
String |
The HTTP method used to retrieve the data. |
Post |
Data |
Array |
The list data that is 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 |
Filter |
function |
Defines how local data is filtered when ' mode ' is set to ' local '. The function has two parameters: Q: Text entered by the user. Row: The line data in the list. Returns 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 |
Defines how rows are rendered. The function has 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 data is loaded from a remote server. Returns false to cancel the action. The function has the following parameters: PARAM: The Parameter object to upload to the remote server. Success (data): The callback function that will be called when the data is obtained successfully. Error (): The callback function that will be called when the fetch data fails.
|
JSON loader |
Loadfilter |
function (data) |
Returns the filtered data to be displayed. This property is available from version 1.3.3. |
|
Event
The event expands from the combination (combo), and the following is an event added for a combo box (ComboBox).
name |
Parameters |
Description |
Onbeforeload |
Param |
Fires before the request loads the data, and returns False to cancel the 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 |
triggered when the remote data load is successful. |
Onloaderror |
None |
triggered when the remote data load fails. |
OnSelect |
Record |
Triggered when the user selects a list item. |
Onunselect |
Record |
Triggered when a user cancels the selection of a list item. |
Method
The method extends the self-assembly (combo), and the following is a method for adding or overriding a combo box (ComboBox).
name |
Parameters |
Description |
Options |
None |
Returns the Options object. |
GetData |
None |
Returns the loaded data. |
LoadData |
Data |
Loads the local list data. |
Reload |
Url |
Requests the remote list data. The ' url ' parameter to override the original URL value. code example:$ (' #cc '). ComboBox (' Reload '); Reload list data using the old url$ (' #cc '). ComboBox (' Reload ', ' get_data.php '); Reload list data using new URL |
Setvalues |
Values |
Sets an array of combo box (ComboBox) values. code example:$ (' #cc '). ComboBox (' Setvalues ', [' 001 ', ' 002 ']); |
SetValue |
Value |
Sets the value of the combo box (ComboBox). code example:$ (' #cc '). ComboBox (' SetValue ', ' 001 '); |
Clear |
None |
Clears the value of the combo box (ComboBox). |
Select |
Value |
Select the specified option. |
Unselect |
Value |
Deselect the specified option. |
JQuery Easyui Form Plugin-combobox combo box