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

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

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

查看jQuery EasyUI演示

创建数据网格

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

1	< script type = "text/javascript" src = "http://www.jeasyui.com/easyui/datagrid-scrollview.js" ></ script >

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$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的教程>>