❮ Jeasyui Form Form5 Jeasyui Datagrid Datagrid9 ❯

jQuery EasyUI Form Plugin - `Combogrid Combo Grid`

Extends from $.fn.combo.defaults and $.fn.datagrid.defaults. Overrides the default defaults with $.fn.combogrid.defaults.

The Combo Grid (combogrid) combines an editable text box with a dropdown data grid panel, allowing users to quickly search and select from the dropdown data grid panel. The Combo Grid (combogrid) provides keyboard navigation support for selecting items.

Dependencies

combo
datagrid

Usage

Creating a Combo Grid (combogrid)

Create a Combo Grid (combogrid) from markup.

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
    data-options="
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    "></select>

Create a Combo Grid (combogrid) using JavaScript from an existing <select> or <input> element.
```
<input id="cc" name="dept" value="01">
```

$('#cc').combogrid({
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
});

Autocomplete Functionality

Let's add autocomplete functionality to the Combo Grid (combogrid). The dropdown data grid will display possible results based on user input.

$('#cc').combogrid({
    delay: 500,
    mode: 'remote',
    url: 'get_data.php',
    idField: 'id',
    textField: 'name',
    columns: [[
        {field:'code',title:'Code',width:120,sortable:true},
        {field:'name',title:'Name',width:400,sortable:true}
    ]]
});

On the server side, the 'q' parameter must be retrieved first. The user can query the database and then return the SQL result in JSON format to the browser.

get_data.php:

$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);

Properties

This property extends from combo and datagrid. The following are the properties added for the Combo Grid (combogrid).

Name	Type	Description	Default Value
loadMsg	string	The message displayed when the data grid (datagrid) loads remote data.	null
idField	string	The field name of the id.	null
textField	string	The field name of the text displayed in the text box.	null
mode	string	Defines how to load the data grid (datagrid) data when the text changes. Set to 'remote' if the Combo Grid (combogrid) loads from the server. 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 fetch new data.	local
filter	function(q, row)	Defines how to select local data when 'mode' is set to 'local'. Returns true to select the row. <br>Example: $('#cc').combogrid({<br> filter: function(q, row){<br> var opts = $(this).combogrid('options');<br> return row[opts.textField].indexOf(q) == 0;<br> }<br>});	100

Events

This event extends from combo and datagrid.

Methods

This method extends from combo. The following are the methods added or overridden for the Combo Grid (combogrid).

Name	Parameters	Description
options	none	Returns the options object.
grid	none	Returns the data grid (datagrid) object. Example: var g = $('#cc').combogrid('grid'); // get datagrid object<br>var r = g.datagrid('getSelected'); // get the selected row<br>alert(r.name);
setValues	values	Sets the array of component values. <br>Example: $('#cc').combogrid('setValues', ['001','007']);
setValue	value	Sets the component value. <br>Example: $('#cc').combogrid('setValue', '002');
clear	none	Clears the component value.