jEasyUI filter dropdown data grid


What the drop-down data grid (Combogrid) component and the drop-down box (Combobox) component have in common is that, in addition to both having drop-down panels, they are both based on the data grid (Datagrid). The drop-down data grid (Combogrid) component can filter, paging, and has some other data grid (Datagrid) functions. This tutorial shows you how to filter data records in a Combogrid component.

125.png

Create drop-down data grid (Combogrid) 

<input id="cg" style="width:150px">
$('#cg').combogrid({
	panelWidth:500,
	url: 'form5_getdata.php',
	idField:'itemid',
	textField:'productid',
	mode:'remote',
	fitColumns:true,
	columns:[[
		{field:'itemid',title:'Item ID',width:60},
		{field:'productid',title:'Product ID',align:'right',width:80},
		{field:'listprice',title:'List Price',align:'right',width:60},
		{field:'unitcost',title:'Unit Cost',align:'right',width:60},
		{field:'attr1',title:'Attribute',width:150},
		{field:'status',title:'Stauts',align:'center',width:60}
	]]
});

The drop-down data grid (Combogrid) component should define the 'idField' and 'textField' properties. The 'idField' property stores the component value and the 'textField' property displays the text message in the input text box. The Combogrid component can filter records in 'local' or 'remote' mode. In remote mode, when the user enters characters into the input text box, the combogrid will send the 'q' parameter to the remote server.

Server-side code

form5_getdata.php
$q = isset($_POST['q']) ? strval($_POST['q']) : '';

include 'conn.php';

$rs = mysql_query("select * from item where itemid like '%$q%' or productid like '%$q%'");
$rows = array();
while($row = mysql_fetch_assoc($rs)){
	$rows[] = $row;
}
echo json_encode($rows);

Download jQuery EasyUI instance

jeasyui-form-form5.zip