jQuery EasyUI Form - Filter ComboGrid
The ComboGrid component shares similarities with the ComboBox component, both of which have a dropdown panel and are based on the DataGrid. The ComboGrid component can filter, paginate, and has other functionalities of the DataGrid. This tutorial demonstrates how to filter data records in a ComboGrid component.
Create a 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:'Status',align:'center',width:60}
]]
});
The 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 box. The ComboGrid component can filter records in 'local' or 'remote' mode. In remote mode, when a user inputs characters into the input box, the 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);