1. Home
  2. jQuery EasyUI danych Siatka - Używanie wirtualnej widok przewijania wyświetla dane masowe

Najlepszy samouczek jQuery EasyUI danych Siatka - Używanie wirtualnej widok przewijania wyświetla dane masowe W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI danych Siatka - Używanie wirtualnej widok przewijania wyświetla dane masowe

Siatka danych (DataGrid) funkcja przewijania wirtualna może być używany do wyświetlania dużej liczby rekordów, bez przywoływania. Kiedy pionowy pasek przewijania, aby przewinąć siatki danych (DataGrid) żądania ajax wykonawczego do załadowania i odświeżyć dotychczasowe rekordy. Cały przebieg działań była gładka nie odświeżać miga. W tym tutorialu, będziemy tworzyć siatkę danych (datagrid) i użyć funkcji przewijania wirtualny załadowanie danych z serwera.

Tworzenie siatki danych (DataGrid)

Dane kratka (DataGrid) za pomocą funkcji przewijania wirtualny "Widok" Własność powinna być ustawiona na "Scrollview". Użytkownicy powinni pobrać Scrollview przedłużony z siatki danych (DataGrid), a strona referencyjna pliku Scrollview nagłówek. 

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

<Table id = class "tt" = "easyui-DataGrid" style = "width: 700px; height: 300px"
		title = "DataGrid - VirtualScrollView"
		data-options = "Widok: Scrollview, rownumbers: prawda, singleSelect: true,
			url: 'datagrid27_getdata.php "autoRowHeight: false, pageSize: 50">
	<THEAD>
		<Tr>
			<Th pole = "inv" width = "80"> Inv Nie </ th>
			<Th pole = "date" width = "100"> Data </ ​​th>
			<Th pole = "name" width = "80"> Nazwa </ th>
			<Th pole = "ilość" width = "80" align = "right"> Ilość </ th>
			<Th pole = "cena" width = "80" align = "right"> Cena </ th>
			<Th pole = "koszt" width = "100" align = "right"> Koszt </ th>
			<Pole Th = "note" width = "110"> Uwaga </ th>
		</ Tr>
	</ THEAD>
</ Table>

Należy pamiętać, że nie trzeba używać właściwości paginacji, ale atrybut pageSize jest wymagane, tak aby siatka Żądanie wykonania ajax danych (DataGrid) dla określonej liczby rekordów z serwera.

Kod po stronie serwera

datagrid27_getdata.php 

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

$ Items = array ();
date_default_timezone_set ( "UTC");
for ($ i = 1; $ i <= $ wiersze; $ i ++) {
	$ Index = $ i + ($ page-1) * $ wiersze;
	$ Amount = rand (50100);
	$ Cena = rand (10000,20000) / 100;
	$ Przedmioty [] = array (
		"Inv '=> sprintf (" INV% 04d ", $ index),
		'Data' => data ( "YM-d ', time () + 24 * 3600 * $ i),
		"Nazwa '=>' Nazwa '. $ Index,
		'Uwaga' => 'Uwaga'. $ Index,
		'Kwota' => $ kwota,
		'Cena' => sprintf ( "% 01.2f ', $ cena),
		"Koszt '=> sprintf ("% 01.2f', $ amount * $ cena)
	);
}
$ Result = array ();
$ Result [ 'całkowite'] = 8000;
$ Result [ 'wiersze'] = $ przedmiotów;
echo json_encode ($ result);

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid27.zip

Hot Tutorials

Contact US

jQuery EasyUI danych Siatka - Używanie wirtualnej widok przewijania wyświetla dane masowe
10/30