jQuery EasyUI使用教程之使用虚拟滚动视图显示海量数据

数据网格的虚拟滚动功能可以用来显示大量的数据记录而无需分页。当滚动条垂直滚动时，数据网格执行Ajax请求来加载和刷新现有的记录。整个刷新的操作过程是平稳无闪烁的。在本教程中，我们将创建一个数据网格，并运用虚拟滚动功能从服务器中加载数据。

jQuery EasyUI最新试用版下载请猛戳>>

查看jQuery EasyUI演示

创建数据网格

想要应用数据网格的虚拟滚动功能，将'view' 属性设置为'scrollview'。用户从数据网格的扩展中下载scrollview，同时在页面头部引用scrollview文件。

< script type = "text/javascript" src = "http://www.jeasyui.com/easyui/datagrid-scrollview.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属性，但pageSize属性是必需的，这样执行ajax请求时数据网格将从服务器获取指定数量的记录。

服务器端代码

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

下载EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>