jQuery EasyUI Data Grid - Use virtual scrolling views to display large amounts of data

jQuery EasyUI Data Grid - Use virtual scrolling views to display large amounts of data

jQuery EasyUI Datagrid can use virtual scrolling views to display large numbers of records without pedding. S croll through the vertical scroll bar, and the data grid executes ajax requests to load and refresh existing records;

In this section example, we'll create a data grid and load the data from the server using the virtual scrolling feature.

Create a data grid (DataGrid)

Using virtual scrolling features for the data grid, the 'view' property should be set to 'scrollview'. Users should download the scrollview from the data grid extension and reference the scrollview file at the head of the page.

<script type="text/javascript" src="//www.w3cschool.cn/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>

Note that we don't need to use the pageSize property here, but the pageSize property is required so that when you make an ajax request, the datagrid gets a specified number of records from the server.

Server-side code

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);

Download the jQuery EasyUI instance

jeasyui-datagrid-datagrid27.zip