jQuery EasyUI Formularios -Filtrar cuadrícula desplegable de datos

El componente de cuadrícula desplegable de datos (Combogrid) y el componente de cuadro combinado (Combobox) tienen en común que, además de tener un panel desplegable, ambos se basan en la cuadrícula de datos (Datagrid). El componente de cuadrícula desplegable de datos (Combogrid) puede filtrar, paginar y tiene otras funciones de la cuadrícula de datos (Datagrid). Este tutorial le muestra cómo filtrar registros de datos en un componente de cuadrícula desplegable de datos (Combogrid).

Crear una cuadrícula desplegable de datos (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}
    ]]
});

El componente de cuadrícula desplegable de datos (Combogrid) debe definir las propiedades 'idField' y 'textField'. La propiedad 'idField' almacena el valor del componente, y la propiedad 'textField' muestra el mensaje de texto en el cuadro de entrada (input). El componente de cuadrícula desplegable de datos (Combogrid) puede filtrar registros en modo 'local' o 'remote'. En el modo remoto, cuando el usuario escribe caracteres en el cuadro de entrada (input), la cuadrícula desplegable de datos (Combogrid) envía el parámetro 'q' al servidor remoto.

Código del servidor

$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);

Descargar ejemplos de jQuery EasyUI

jeasyui-form-form5.zip