2019独角兽企业重金招聘Python工程师标准>>> 
数据网格的虚拟滚动功能可以用来显示大量的数据记录而无需分页。当滚动条垂直滚动时，数据网格执行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的教程>>