Jquery easy UI can load a combo box-ComboBox

ArticleDirectory

• ComboBox

ComboBox

Inherited from$. FN. Combo. defaults, through$. FN. ComboBox. defaults overwrites the default value

ComboBox displays an editable text box and a drop-down list. you can select one or more values from the list. You can directly enter a value to the top of the list, or select one or more existing values from the list.

Dependencies

• Combo

Usage (usage example)

Create 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>

<Select id = "cc" class = "easyui-ComboBox" name = "Dept" style = "width: 200px; "> <br/> <option value =" AA "> aitem1 </option> <br/> <option> bitem2 </option> <br/> <option> bitem3 </option> <br/> <option> ditem4 </option> <br/> <option> eitem5 </option> <br/> </SELECT> <br/>

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' " />

<Input id = "cc" class = "easyui-ComboBox" name = "Dept" <br/> data-Options = "valuefield: 'id', textfield: 'text ', URL: 'Get _ data. php' "/> <br/>

Create a ComboBox using JavaScript

1. <Input ID="Cc" Name="Dept" Value="AA">

<Input id = "cc" name = "Dept" value = "AA"> <br/> 

1. $ ('# CC'). ComboBox ({
2. URL:'Combobox _ data. json',
3. Valuefield:'Id',
4. Textfield:'Text'
5. });

$ ('# CC '). comboBox ({<br/> URL: 'combobox _ data. json', <br/> valuefield: 'id', <br/> textfield: 'text' <br/>}); <br/>

Create two dependent comboboxes

2. <Input ID="Maid" Class="Easyui-ComboBox" Data-Options="
4. Valuefield: 'id ',
6. Textfield: 'text ',
8. URL: 'Get _ data1.php ',
10. Onselect: function (REC ){
12. VaRURL='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' " />

<Input id = "PC3" class = "easyui-ComboBox" data-Options = "<br/> valuefield: 'id', <br/> textfield: 'text ', <br/> URL: 'Get _ data1.php', <br/> onselect: function (REC) {<br/> var url = 'get _ data2.php? Id = '+ rec. ID; <br/> $ ('# cc2 '). comboBox ('reload', URL ); <br/>}"/> <br/> <input id = "CC2" class = "easyui-ComboBox" data-Options = "valuefield: 'id', textfield: 'text' "/> <br/>

JSON data conversion 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. }]

[{<Br/> "ID": 1, <br/> "text": "text1" <br/>},{ <br/> "ID": 2, <br/> "text": "text2" <br/>},{ <br/> "ID": 3, <br/> "text": "text3 ", <br/> "selected": True <br/>},{ <br/> "ID": 4, <br/> "text ": "text4" <br/>},{ <br/> "ID": 5, <br/> "text ": "text5" <br/>}] <br/>
Properties

These attributes are inherited to combo. Below are some new attributes of ComboBox.

Name	Type	Description	Default
Valuefield	String	The name of the basic data value bound to this ComboBox.	Value
Textfield	String	The data field name bound to this ComboBox.	Text
Mode	String	When the text changes, it defines how to load the display list data. If it is set to 'remote' ComboBox to load data from the remote server, when it is set to 'remote' mode, The information entered by the user will be sent as an HTTP request parameter. The parameter name is 'Q' and the server will retrieve new data.	Local
URL	String	A URL for loading list data from a remote server.	Null
Method	String	HTTP Request Method for data retrieval.	Post
Data	Array	The data to be loaded to the list. ExampleCode: <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 to filter local data. When 'Mode' is set to 'local', this function provides two parameters: Q: The text entered by the user. Row: The row data of the list. Returns true to allow row display. Sample 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. Sample Code: $ ('# 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 the remote server. returns false to terminate this action. This function provides the following parameters: Param: The parameter object passed to the remote server. Success (data ): This callback function is called when data is successfully retrieved. Error (): this function will be called when data retrieval fails (an exception occurs, instead of returning NULL data.	JSON Loader

Events

Events are inherited to combo. The following are new events in ComboBox.

Name	Parameters	Description
Onbeforeload	Param	A request is triggered before data is loaded, and false is returned to cancel the loading operation. Sample Code: // Change the request parameter $ ('# CC') before loading data from the remote server '). comboBox ({onbeforeload: function (PARAM) {Param. id = 2; Param. language = 'js ';}});
Onloadsuccess	None	Triggered when the remote data is loaded successfully.
Onloaderror	None	Remote Data Loading error triggered.
Onselect	Record	Triggered when a list item is selected.
Onunselect	Record	Triggered when a list item is deselected.

Methods

Methods are inherited to combo. The following are newly added or overwritten methods of ComboBox.

Name	Parameter	Description
Options	None	Returns the options object.
Getdata	None	Returns the loaded data.
Loaddata	Data	Return Local List data.
Reload	URL	Request Remote Server LIST data. input the 'url' parameter to overwrite the original URL value. Sample Code: $ ('# CC '). comboBox ('reload'); // use the original URL to reload the list data $ ('# CC '). comboBox ('reload', 'Get _ data. PHP '); // use the new URL to reload the List Data
Setvalues	Values	Set the ComboBox value array. Sample Code: $ ('# CC'). ComboBox ('setvalues', ['001', '002']);
Setvalue	Value	Set the ComboBox value. Sample Code: $ ('# CC'). ComboBox ('setvalues', '001 ');
Clear	None	Clear the ComboBox value.
Select	Value	Select a specific item.
Unselect	Value	Cancels a specific selection.
$ ('# Id'). combogrid ('grid'). DataGrid ('selectrecord', value); used to set the default value $ ('# Goodsselect'). combogrid ('grie'). DataGrid ("clearselections"); clear the selection