Grille de données déroulante du filtre jEasyUI


Ce que le composant de grille de données déroulante (Combogrid) et le composant de boîte déroulante (Combobox) ont en commun, c'est qu'en plus d'avoir tous deux des panneaux déroulants, ils sont tous deux basés sur la grille de données (Datagrid). Le composant de grille de données déroulante (Combogrid) peut filtrer, paginer et possède d'autres fonctions de grille de données (Datagrid). Ce didacticiel vous montre comment filtrer les enregistrements de données dans un composant Combogrid.

125.png

Créer une grille de données déroulante (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 de grille de données déroulante (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 texte de saisie. Le composant Combogrid peut filtrer les enregistrements en mode « local » ou « distant ». En mode distant, lorsque l'utilisateur saisit des caractères dans la zone de texte de saisie, le combogrid enverra le paramètre « q » au serveur distant.

Code côté serveur

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

Télécharger l'instance jQuery EasyUI

jeasyui-form-form5.zip