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