jEasyUI affiche des données massives

La fonction de défilement virtuel de la grille de données peut être utilisée pour afficher un grand nombre d'enregistrements sans pagination. Lorsque la barre de défilement verticale défile, la grille de données effectue des requêtes ajax pour charger et actualiser les enregistrements existants. L’ensemble du processus de rafraîchissement est fluide et sans scintillement. Dans ce didacticiel, nous allons créer une grille de données et charger les données depuis le serveur à l'aide du défilement virtuel.

Créer DataGrid

Pour utiliser la fonction de défilement virtuel pour la grille de données, l'attribut 'view' doit être défini sur 'scrollview'. Les utilisateurs doivent télécharger scrollview à partir de l'extension datagrid et référencer le fichier scrollview dans l'en-tête de la page.

<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>

<table id="tt" class="easyui-datagrid" style="width:700px;height:300px"
		title="DataGrid - VirtualScrollView"
		data-options="view:scrollview,rownumbers:true,singleSelect:true,
			url:'datagrid27_getdata.php',autoRowHeight:false,pageSize:50">
	<thead>
		<tr>
			<th field="inv" width="80">Inv No</th>
			<th field="date" width="100">Date</th>
			<th field="name" width="80">Name</th>
			<th field="amount" width="80" align="right">Amount</th>
			<th field="price" width="80" align="right">Price</th>
			<th field="cost" width="100" align="right">Cost</th>
			<th field="note" width="110">Note</th>
		</tr>
	</thead>
</table>

Veuillez noter qu'ici, nous n'avons pas besoin d'utiliser l'attribut de pagination, mais l'attribut pageSize est requis pour que lors de l'exécution d'une requête ajax, la grille de données obtienne le nombre d'enregistrements spécifié du serveur.

Code côté serveur

datagrid27_getdata.php

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 50;

$items = array();
date_default_timezone_set('UTC');
for($i=1; $i<=$rows; $i++){
	$index = $i+($page-1)*$rows;
	$amount = rand(50,100);
	$price = rand(10000,20000)/100;
	$items[] = array(
		'inv' => sprintf("INV%04d",$index),
		'date' => date('Y-m-d',time()+24*3600*$i),
		'name' => 'Name' . $index,
		'note' => 'Note' . $index,
		'amount' => $amount,
		'price' => sprintf('%01.2f',$price),
		'cost' => sprintf('%01.2f',$amount*$price)
	);
}
$result = array();
$result['total'] = 8000;
$result['rows'] = $items;
echo json_encode($result);

Télécharger l'instance jQuery EasyUI

jeasyui-datagrid-datagrid27.zip