jQuery EasyUI Form -Filtrer ComboGrid

Le point commun entre le composant ComboGrid et le composant ComboBox est que, outre le fait qu'ils ont tous deux un panneau déroulant, ils sont tous deux basés sur le DataGrid. Le composant ComboGrid peut filtrer, paginer et possède d'autres fonctionnalités de DataGrid. Ce tutoriel vous montre comment filtrer des enregistrements de données dans un composant ComboGrid.

Créer 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}
    ]]
});

Le composant ComboGrid doit définir les propriétés 'idField' et 'textField'. La propriété 'idField' stocke la valeur du composant, et la propriété 'textField' affiche le message texte dans la zone de saisie. Le composant ComboGrid peut filtrer les enregistrements en mode 'local' ou 'remote'. En mode remote, lorsque l'utilisateur saisit des caractères dans la zone de saisie, le ComboGrid envoie le paramètre 'q' au serveur distant.

Code côté serveur

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

Télécharger les exemples jQuery EasyUI

jeasyui-form-form5.zip