jEasyUI définit le tri

Cet exemple montre comment trier la grille de données (DataGrid) en cliquant sur l'en-tête de la liste.

Toutes les colonnes du DataGrid peuvent être triées en cliquant sur l'en-tête de colonne. Vous pouvez définir quelles colonnes peuvent être triées. Par défaut, les colonnes ne peuvent pas être triées sauf si vous définissez la propriété sortable sur true.

Créer une grille de données (DataGrid)

	<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
			url="datagrid8_getdata.php"
			title="Load Data" iconCls="icon-save"
			rownumbers="true" pagination="true">
		<thead>
			<tr>
				<th field="itemid" width="80" sortable="true">Item ID</th>
				<th field="productid" width="80" sortable="true">Product ID</th>
				<th field="listprice" width="80" align="right" sortable="true">List Price</th>
				<th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>

Nous définissons certaines colonnes triables, notamment itemid, productid, listprice, unitcost, etc. Les colonnes 'attr1' et 'status' ne peuvent pas être triées.

Lors du tri, le DataGrid enverra deux paramètres au serveur distant :

• sort : nom du champ de la colonne de tri.

• order : méthode de tri, qui peut être 'asc' ou 'desc', la valeur par défaut est 'asc'.

Code côté serveur

	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
	$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';
	$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
	$offset = ($page-1)*$rows;
	
	$result = array();
	
	include 'conn.php';
	
	$rs = mysql_query("select count(*) from item");
	$row = mysql_fetch_row($rs);
	$result["total"] = $row[0];
	
	$rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;
	
	echo json_encode($result);

Télécharger l'instance jQuery EasyUI

jeasyui-datagrid-datagrid8.zip