jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

下面直接给你最实用、最专业的虚拟滚动视图（Virtual Scroll View）方法，jQuery EasyUI datagrid 通过官方扩展scrollview实现，支持显示百万级海量数据而不分页，滚动时自动 AJAX 加载数据，流畅无闪烁，复制粘贴就能用，领导最爱的“大数据报表、无限滚动”效果全都有！

前提：引入 scrollview 扩展文件
在 jquery.easyui.min.js 之后添加：

<scriptsrc="jquery.easyui.min.js"></script><scriptsrc="datagrid-scrollview.js"></script><!-- 关键扩展文件，从官网下载：https://www.jeasyui.com/extension/datagridview.php -->

方法1：最简单最常用 - 基本虚拟滚动视图（推荐现在就用这个，超级流畅！）

<tableid="dg"class="easyui-datagrid"title="虚拟滚动显示海量数据（百万行）"style="width:900px;height:600px"data-options="url:'get_large_data.php', <!-- 后台接口：返回 {total:1000000, rows:[...当前页数据]} --> fitColumns:true, singleSelect:true, rownumbers:true, autoRowHeight:false, <!-- 必须关闭自动行高，否则性能差 --> pageSize:100, <!-- 每“页”加载条数（滚动时加载量） --> remoteSort:false, <!-- 建议关闭远程排序，或自行处理 --> view: scrollview <!-- 关键：使用虚拟滚动视图 -->"><thead><tr><thfield="id"width="80">ID</th><thfield="name"width="150">名称</th><thfield="date"width="120">日期</th><thfield="amount"width="100"align="right">金额</th><thfield="status"width="80">状态</th><thfield="note"width="200">备注</th></tr></thead></table>

后台接口示例（get_large_data.php）：

<?php$page=isset($_REQUEST['page'])?$_REQUEST['page']:1;$rows=isset($_REQUEST['rows'])?$_REQUEST['rows']:100;// pageSize$start=($page-1)*$rows;// 模拟百万数据（实际从数据库取）$total=1000000;$data=array();for($i=$start;$i<$start+$rows;$i++){$data[]=array('id'=>$i+1,'name'=>'名称'.($i+1),'date'=>date('Y-m-d'),'amount'=>rand(100,9999).'.'.rand(10,99),'status'=>'正常','note'=>'备注信息'.($i+1));}echojson_encode(array('total'=>$total,'rows'=>$data));?>

效果：

• 无分页器，但滚动条很长（模拟百万行）
• 拖动滚动条时自动 AJAX 加载当前可视区数据，超级顺滑无闪烁
• 支持行号、排序（需注意远程排序）、选中等基本功能

方法2：结合展开详情的虚拟滚动（Virtual Scroll + Detail View）
如果想支持行展开显示子内容，还能保持虚拟滚动性能：

先额外引入datagrid-detailview.js，然后：

data-options=" view:scrollview,detailFormatter:function(index,row){return'<div style=\"padding:10px\"><table class=\"subdg\"></table></div>';},onExpandRow:function(index,row){// 同之前子网格逻辑，加载子数据}"

（官网有专用 demo：Virtual Scroll View with Detail Rows）

方法3：替代方案 - Buffer View（缓冲滚动，滚动到底部自动加载）
如果你的数据是“无限加载”型（比如日志列表），用bufferview更合适：

<script src="datagrid-bufferview.js"></script><!--另一个扩展-->data-options="view: bufferview, pageSize:50"

滚动到底部自动追加数据，不需要长滚动条。

你现在直接下载datagrid-scrollview.js，引入后复制方法1代码，准备好后台接口，刷新页面就能看到百万级数据的虚拟滚动效果了！
性能爆表，卡顿说拜拜，完美解决大数据表格问题。

想要我给你一个完整的HTML示例（带模拟百万数据 + 虚拟滚动 + 行内编辑 + 条件颜色）？
或者你告诉我你的数据量/接口情况（比如“总共50万行”“需要支持排序/过滤”），我2分钟发你优化代码，复制就能跑！

快说说你的具体需求，我手把手帮你搞定，5分钟内看到海量数据丝滑滚动的效果！