JQuery Easyui Form Plugin-combobox combo box

Source: Internet
Author: User

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
    • Combo
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.