jQuery EasyUI Form - Filtered Pull-down Data Grid (ComboGrid)

jQuery EasyUI Form - Filter pull-down data grid

This section will show you how to filter the pull-down data grid (ComboGrid) in jQuery EasyUI.

What the Combogrid and Combobox components have in common is that they are datagrid-based, except for the drop-down panels. T he Combogrid component filters, peddles, and has some other data grid capabilities.

The following example shows you how to filter data records in a pull-down data grid component.

Create a pull-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 Combogrid component should define the 'idField' and 'textField' properties. T he 'idField' property stores component values, and the 'textField' property displays a text message in the input text box. T he down-pull data grid (Combogrid) component filters records in 'local' or 'remote' mode. I n remote mode, when the user enters characters into the input text box, the down-pull data grid (Combogrid) sends the 'q' parameter to the remote server.

Server-side code

$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 the jQuery EasyUI instance

jeasyui-form-form5.zip