1. Heim
  2. jQuery EasyUI Data Grid - zeigt die virtuelle Ansicht blättern Mit Massendaten

Das beste jQuery EasyUI Data Grid - zeigt die virtuelle Ansicht blättern Mit Massendaten-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen

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

Hot Tutorials

Kontaktiere uns

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