Das beste jQuery EasyUI Data Grid - stellen Sie die Art-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen

jQuery EasyUI Data Grid - stellen Sie die Art

Dieses Beispiel zeigt, wie das Datenraster (Datagrid) Liste zu sortieren, indem Sie auf die Überschrift klicken.

Data Grid (Datagrid) aller Spalten, indem Sie auf die Kopfzeile klicken, um die Liste zu sortieren. Sie können festlegen, welche Spalten sortiert werden können. Standardmäßig kann die Spalte nicht sortiert werden, wenn Sie die sortierbare Eigenschaft auf true gesetzt.

Erstellen eines Data Grid (Datagrid)

	<Table id = "tt" class = "easyui-Datagrid" style = "width: 600px; height: 250px"
			url = "datagrid8_getdata.php"
			title = "Load Data" iconCls = "icon-save"
			rownumbers = "true" Paginierung = "true">
		<Thead>
			<Tr>
				<Th Feld = "itemid" width = "80" sortierbar = "true"> Item ID </ th>
				<Th Feld = "productid" width = "80" sortierbar = "true"> Product ID </ th>
				<Th Feld = "gelisteter" width = "80" align = "right" sortierbar = "true"> Listenpreis </ th>
				<Th Feld = "Unitcost" width = "80" align = "right" sortierbar = "true"> Kosten pro Einheit </ th>
				<Th Feld = "attr1" width = "150"> Attribut </ th>
				<Th field = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

Wir definieren einige sortierbare Spalten enthalten itemid, productid, gelisteter, Unitcost mögen. 'Attr1' Spalte und die Spalte "Status" nicht sortiert werden können.

Wenn Sie das Datenraster zu sortieren (Datagrid) sendet zwei Argumente an den Remote-Server:

  • Art: die Liste der Feldnamen sortieren.
  • Reihenfolge: Sortieren, kann 'asc' oder 'ab' sein, der Standardwert ist 'ASC'.

Server-Side-Code

	? $ Page = isset ($ _ POST [ 'Seite']) intval ($ _ POST [ 'Seite']): 1;
	? $ Rows = isset ($ _ POST [ 'Reihen']) intval ($ _ POST [ 'Reihen']): 10;
	? $ Sort = isset ($ _ POST [ 'sortieren']) strval ($ _ POST [ 'sortieren']): 'itemid';
	? $ Order = isset ($ _ POST [ 'bestellen']) strval ($ _ POST [ 'bestellen']): 'asc';
	Offset = ($ page-1) $ * $ Reihen;
	
	$ Ergebnis = array ();
	
	schließen 'conn.php';
	
	$ Rs = mysql_query ( "SELECT COUNT (*) aus Position");
	$ Row = mysql_fetch_row ($ rs);
	Ergebnis $ [ "total"] = $ row [0];
	
	$ Rs = mysql_query ( "select * from Artikel Sortieren nach Art $ Auftragslimit $ offset $, $ Reihen");
	
	$ Artikel = array ();
	while ($ row = mysql_fetch_object ($ rs)) {
		array_push ($ items, $ row);
	}
	Ergebnis $ [ "Reihen"] = Artikel $;
	
	Echo json_encode ($ result);

Download von jQuery EasyUI Beispiele

jeasyui-datagrid-datagrid8.zip

jQuery EasyUI Data Grid - stellen Sie die Art
10/30