jQuery EasyUI Data Grid - zeigt die virtuelle Ansicht blättern Mit Massendaten

Data Grid (Datagrid) Funktion virtuellen Scrollen kann verwendet werden, ohne Paging eine große Anzahl von Datensätzen anzuzeigen. Wenn die vertikale Bildlaufleiste, um das Datenraster (Datagrid) Executive Ajax-Anforderung zu blättern die vorhandenen Datensätze zu laden und zu aktualisieren. Der gesamte Verlauf der Aktion ist glatt Refresh nicht mehr blinkt. In diesem Tutorial werden wir ein Datengitter (Datagrid), zu erstellen und die virtuelle Scroll-Funktion verwenden, um Daten vom Server zu laden.

Erstellen eines Data Grid (Datagrid)

Grid-Daten (Datagrid) mit virtuellen Scroll-Funktion, 'view' Eigenschaft sollte auf 'Scroll' gesetzt werden. Benutzer sollten Scroll aus dem Datengitter (Datagrid) erweitert herunterladen und Referenz Scroll Datei Seitenkopf.

<Script type = "text / javascript" src = "/try/jeasyui/datagrid-detailview.js"> </ script>

<Table id = "tt" class = "easyui-Datagrid" style = "width: 700px; height: 300px"
		title = "Datagrid - VirtualScrollView"
		Daten-Optionen = "Ansicht: Scrollview, rownumbers: true, singleSelect: true,
			url: 'datagrid27_getdata.php', autoRowHeight: false, pagesize: 50 ">
	<Thead>
		<Tr>
			<Th field = "inv" width = "80"> Inv Nein </ th>
			<Th field = "date" width = "100"> Datum </ th>
			<Th Feld = "name" width = "80"> Name </ th>
			<Th Feld = "Menge" width = "80" align = "right"> Betrag </ th>
			<Th field = "Preis" width = "80" align = "right"> Preis </ th>
			<Th Feld = "Kosten" width = "100" align = "right"> Kosten </ th>
			<Th field = "note" width = "110"> Hinweis </ th>
		</ Tr>
	</ Thead>
</ Table>

Bitte beachten Sie, dass wir nicht brauchen, die Paginierung Eigenschaft zu verwenden, aber pagesize Attribut ist erforderlich, so dass die Ausführung Ajax-Request Datengitter (Datagrid) für die angegebene Anzahl von Datensätzen aus dem Server.

Server-Side-Code

datagrid27_getdata.php

? $ Page = isset ($ _ POST [ 'Seite']) intval ($ _ POST [ 'Seite']): 1;
$ rows = isset ($ _ POST [ 'Reihen']) intval ($ _ POST [ 'Reihen']) :? 50;

$ Artikel = array ();
date_default_timezone_set ( 'UTC');
for ($ i = 1; $ i <= $ Reihen; $ i ++) {
	$ Index = $ i + ($ page-1) * $ Reihen;
	$ Betrag = rand (50,100);
	$ Preis = rand (10000,20000) / 100;
	$ Artikel [] = array (
		'Inv' => sprintf ( "INV% 04d", $ index),
		'Datum' => Datum ( 'Ym-d', time () + 24 * 3600 * $ i),
		'Name' => 'Name'. $ Index,
		'Note' => 'Hinweis'. $ Index,
		'Amount' => $ Betrag,
		'Preis' => sprintf ( '% 01.2f', $ Preis),
		'Kosten' => sprintf ( '% 01.2f', $ Menge * $ Preis)
	);
}
$ Ergebnis = array ();
Ergebnis $ [ 'Total'] = 8000;
Ergebnis $ [ 'Reihen'] = Artikel $;
Echo json_encode ($ result);

Download von jQuery EasyUI Beispiele

jeasyui-datagrid-datagrid27.zip