YouTip

* * jQuery EasyUI Plugin](#) * * * Extends from $.fn.combo.defaults and $.fn.datagrid.defaults. Use $.fn.combogrid.defaults to override the default defaults. The combogrid combines an editable text box with a drop-down datagrid panel. Users can quickly find and select from the drop-down datagrid panel. The combogrid provides keyboard navigation support for selecting an item. !(#) ## Dependencies * combo * datagrid ## Usage #### Create a Combogrid 1. Create a combogrid from markup. 2. Create a combogrid from an existing `` or `` element using javascript. $('#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 Feature Let's add an autocomplete feature to the combogrid. The drop-down datagrid will show 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 a JSON formatted SQL result 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 The properties extend from combo and datagrid. The following properties are added for the combogrid. | Name | Type | Description | Default | | --- | --- | --- | --- | | loadMsg | string | The message displayed when the datagrid loads remote data. | null | | idField | string | The field name of the id. | null | | textField | string | The field name of the text to display in the text box. | null | | mode | string | Defines how to load the datagrid data when the text changes. Set to 'remote' if the combogrid loads from a server. When set to 'remote' mode, the user input value 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'. Return true to select the row. Code example: $('#cc').combogrid({filter: function(q, row){var opts = $(this).combogrid('options');return row[opts.textField].indexOf(q) == 0;}}); | 100 | ## Events The events extend from combo and datagrid. ## Methods The methods extend from combo. The following methods are added or overridden for the combogrid. | Name | Parameter | Description | | --- | --- | --- | | options | none | Returns the options object. | | grid | none | Returns the datagrid object. The following example shows how to get the selected row: var g = $('#cc').combogrid('grid');// get datagrid objectvar r = g.datagrid('getSelected');// get the selected row alert(r.name); | | setValues | values | Sets an array of component values. Code example: $('#cc').combogrid('setValues', ['001','007']); | | setValue | value | Sets the component value. Code example: $('#cc').combogrid('setValue', '002'); | | clear | none | Clears the component value. | * * jQuery EasyUI Plugin](#)