jEasyUI는 대용량 데이터를 표시합니다.

데이터그리드의 가상 스크롤 기능을 사용하면 페이징 없이 많은 수의 레코드를 표시할 수 있습니다. 세로 스크롤 막대가 스크롤되면 DataGrid는 기존 레코드를 로드하고 새로 고치는 Ajax 요청을 수행합니다. 전체 새로 고침 프로세스가 원활하고 깜박임이 없습니다. 이 튜토리얼에서는 데이터 그리드를 생성하고 가상 스크롤링을 사용하여 서버에서 데이터를 로드합니다.

Create DataGrid

데이터그리드에 가상 스크롤 기능을 사용하려면 'view' 속성을 'scrollview'로 설정해야 합니다. 사용자는 DataGrid 확장에서 스크롤뷰를 다운로드하고 페이지 헤더에서 스크롤뷰 파일을 참조해야 합니다.

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

여기서는 pagination 속성을 사용할 필요가 없지만 ajax 요청을 수행할 때 데이터 그리드가 서버에서 지정된 수의 레코드를 가져오도록 pageSize 속성이 필요합니다.

서버 측 코드

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

jQuery EasyUI 인스턴스 다운로드

jeasyui-datagrid-datagrid27.zip