YouTip

# jQuery EasyUI Form - Filtering ComboGrid The ComboGrid component and the ComboBox component share the commonality that, besides both having a dropdown panel, they are both based on the DataGrid. The ComboGrid component can filter, paginate, and has other DataGrid functionalities. This tutorial shows you how to filter data records in a ComboGrid component. !(#) #### Create a ComboGrid $('#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. 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 types characters into the input text box, the ComboGrid will send a '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 Example [jeasyui-form-form5.zip](#)