news 2026/6/15 14:27:15

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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分钟内看到海量数据丝滑滚动的效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 11:24:44

告别重复刷怪!Botty带你体验智能化的D2R游戏世界

告别重复刷怪&#xff01;Botty带你体验智能化的D2R游戏世界 【免费下载链接】botty D2R Pixel Bot 项目地址: https://gitcode.com/gh_mirrors/bo/botty 厌倦了日复一日的机械操作&#xff1f;Botty作为一款专业的D2R自动化辅助工具&#xff0c;正在重新定义《暗黑破坏…

作者头像 李华
网站建设 2026/6/12 5:13:37

ECI国际艾奇奖携手华为鲸鸿动能,共启数字创新价值新纪元

华为鲸鸿动能 2025年12月6日&#xff0c;全球数字创新领域标杆奖项ECI国际艾奇奖&#xff08;ECIAwards&#xff09;年度终审会在华为上海青浦全球研发中心举办。本届大会以“定义未来”为主题&#xff0c;联合华为旗下基于鸿蒙生态的全场景智慧营销平台“鲸鸿动能”&#xff0…

作者头像 李华
网站建设 2026/6/15 11:20:09

华为Mate 80鸿蒙6.0恢复推送:iOS互传+广告拦截双实用功能上线

华为鸿蒙系统 华为Mate80系列鸿蒙6.0重磅升级&#xff1a;支持iOS跨生态互传&#xff0c;拦截摇一摇广告&#xff0c;相机、图库体验全面优化&#xff0c;系统更流畅安全。 12月15日消息&#xff0c;华为Mate80系列恢复推送鸿蒙HarmonyOS6.0.0.120SP9版本更新&#xff08;更新包…

作者头像 李华
网站建设 2026/6/14 22:31:29

传统抢票VS脚本抢票:效率对比实测分析

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 设计一个测试方案&#xff0c;比较手动操作和脚本抢票的效率。脚本需要记录从开始到成功下单的时间、尝试次数、成功率和被封禁风险。手动操作部分模拟用户典型行为&#xff08;如刷…

作者头像 李华
网站建设 2026/6/15 11:24:34

City-Roads城市道路可视化终极指南:重新定义城市数据探索

City-Roads城市道路可视化终极指南&#xff1a;重新定义城市数据探索 【免费下载链接】city-roads Visualization of all roads within any city 项目地址: https://gitcode.com/gh_mirrors/ci/city-roads City-Roads是一款革命性的城市道路网络可视化工具&#xff0c;通…

作者头像 李华
网站建设 2026/6/15 13:11:56

企业级Docker私有镜像仓库实战指南

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个企业级Docker私有镜像仓库解决方案&#xff0c;基于Harbor实现。包含以下功能&#xff1a;1) 一键部署Harbor服务&#xff1b;2) 多租户权限管理界面&#xff1b;3) 镜像同…

作者头像 李华