我需要使用 JavaScript 在网格中向用户呈现大量数据行（即数百万行）。
用户不应一次查看页面或仅查看有限数量的数据。
相反，似乎所有数据都可用。
不是一次下载所有数据，而是在用户找到它们时下载小块（即通过滚动网格）。
不会通过此前端编辑行，因此可以接受只读网格。
对于这种无缝分页，存在哪些用 JavaScript 编写的数据网格？
问问题
192378 次
19 回答
191
（免责声明：我是 SlickGrid 的作者）
更新 这现在已经在SlickGrid中实现了。
请参阅http://github.com/mleibman/SlickGrid/issues#issue/22，了解有关使 SlickGrid 处理更多行的持续讨论。
问题是 SlickGrid 没有虚拟化滚动条本身——可滚动区域的高度设置为所有行的总高度。当用户滚动时，这些行仍在被添加和删除，但滚动本身是由浏览器完成的。这使它变得非常快速而流畅（众所周知，滚动事件非常慢）。需要注意的是，浏览器的 CSS 引擎中存在限制元素潜在高度的错误/限制。对于 IE，恰好是 0x123456 或 1193046 像素。对于其他浏览器，它更高。
在“largenum-fix”分支中有一个实验性的解决方法，通过将“页面”设置为 1M 像素高度的可滚动区域填充然后在这些页面中使用相对定位来显着提高该限制。由于 CSS 引擎中的高度限制似乎与实际布局引擎中的不同并且明显低于实际布局引擎，因此这给了我们一个更高的上限。
我仍在寻找一种方法来获得无限数量的行，而不会放弃 SlickGrid 目前在其他实现中所拥有的性能优势。
Rudiger，你能详细说明你是如何解决这个问题的吗？
于 2010-04-02T22:18:18.437 回答
84
https://github.com/mleibman/SlickGrid/wiki
“ SlickGrid 利用虚拟渲染使您能够轻松地处理数十万个项目而不会降低性能。事实上，使用 10 行的网格与 100,000 行的网格在性能上没有区别。 ”
一些亮点：
- 自适应虚拟滚动（处理数十万行）
- 极快的渲染速度
- 更丰富的单元格的背景后渲染
- 可配置和可定制
- 全键盘导航
- 列调整大小/重新排序/显示/隐藏
- 色谱柱自动调整大小和强制安装
- 可插拔单元格格式化程序和编辑器
- 支持编辑和创建新行。“由姆莱布曼
它是免费的（MIT 许可证）。它使用 jQuery。
于 2010-03-13T22:59:04.827 回答
38
我认为最好的网格如下：
- 弹性网格： http ://flexigrid.info/
- jQuery 网格： http ://www.trirand.com/blog/
- jqGridView： http ://plugins.jquery.com/project/jqGridView
- jqxGrid： https ://www.jqwidgets.com/
- 英格丽德： http ://reconstrukt.com/ingrid/
- SlickGrid http://github.com/mleibman/SlickGrid
- ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows
- 智能网格 https://www.htmlelements.com/demos/grid/overview/
我最好的 3 个选项是 jqGrid、jqxGrid 和 DataTables。它们可以处理数千行并支持虚拟化。
于 2012-01-12T06:38:52.287 回答
24
我并不是要发动一场激烈的战争，但假设你的研究人员是人类，你并不像你想象的那样了解他们。仅仅因为他们拥有数 PB 的数据，并不能使他们以任何有意义的方式查看数百万条记录。他们可能会说他们想查看数百万条记录，但这很愚蠢。让最聪明的研究人员做一些基本的数学运算：假设他们花 1 秒时间查看每条记录。按照这个速度，这将需要 1000000 秒，这将超过六周（每周工作 40 小时，没有食物或厕所的休息时间）。
他们（或您）是否认真认为一个人（看着网格的人）可以集中注意力？他们真的在那一秒钟内完成了很多工作，还是他们（更有可能）过滤掉了不想要的东西？我怀疑在查看“大小合理”的子集之后，他们可以向您描述一个过滤器，该过滤器会自动过滤掉这些记录。
正如 paxdiablo 和 Sleeper Smith 以及 Lasse V Karlsen 所暗示的那样，您（和他们）还没有考虑过这些要求。从好的方面来说，既然您已经找到了 SlickGrid，我确信对这些过滤器的需求变得显而易见。
于 2011-04-07T12:56:24.740 回答
14
我可以非常肯定地说，您真的不需要向用户显示数百万行数据。
世界上没有用户能够理解或管理该数据集，因此即使您在技术上设法完成它，您也不会为该用户解决任何已知问题。
相反，我会专注于用户想要查看数据的原因。用户不想看到数据只是为了看到数据，通常会提出一个问题。如果您专注于回答这些问题，那么您将更接近解决实际问题的东西。
于 2010-05-20T19:34:00.560 回答
7
我推荐带有缓冲视图功能的 Ext JS Grid。
于 2010-03-13T22:58:57.300 回答
7
（免责声明：我是 w2ui 的作者）
我最近写了一篇关于如何实现包含 100 万条记录的 JavaScript 网格的文章（http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records）。我发现最终有 3 个限制阻止它走高：
- div 的高度有限制（可以通过虚拟滚动来克服）
- 排序和搜索等操作在 100 万条左右记录后开始变慢
- RAM 是有限的，因为数据存储在 JavaScript 数组中
我已经用 100 万条记录测试了网格（IE 除外），它表现良好。有关演示和示例，请参阅文章。
于 2013-12-06T23:35:44.963 回答
6
dojox.grid.DataGrid为数据提供了 JS 抽象，因此您可以使用提供的 dojo.data 存储将其连接到各种后端或编写您自己的存储。您显然需要一个支持对这么多记录进行随机访问的设备。DataGrid 还提供完全的可访问性。
编辑所以这里是Matthew Russell 的文章的链接，它应该提供您需要的示例，使用 dojox.grid 查看数百万条记录。请注意，它使用旧版本的网格，但概念相同，只是一些不兼容的 API 改进。
哦，它是完全免费的开源软件。
于 2010-03-14T19:44:58.300 回答
4
我使用了jQuery Grid Plugin，很好。
于 2010-03-08T16:51:25.670 回答
4
以下是您可以应用的一些优化，以加快速度。只是大声思考。
由于行数可能达到数百万，您将需要一个仅用于来自服务器的 JSON 数据的缓存系统。我无法想象有人想要下载所有 X 百万个项目，但如果他们这样做了，那将是一个问题。这个在 Chrome 上针对 20M+ 整数数组的小测试在我的机器上不断崩溃。
var data = [];
for(var i = 0; i < 20000000; i++) {
data.push(i);
}
console.log(data.length);
您可以使用LRU或其他一些缓存算法，并对愿意缓存的数据量设置上限。
对于表格单元格本身，我认为构建/销毁 DOM 节点可能很昂贵。相反，您可以只预定义 X 个单元格，并且每当用户滚动到新位置时，将 JSON 数据注入这些单元格。滚动条实际上与表示整个数据集需要多少空间（高度）没有直接关系。您可以任意设置表格容器的高度，例如 5000 像素，并将其映射到总行数。例如，如果容器高度为 5000px，总共有 10M 行，那么starting row ≈ (scroll.top/5000) * 10Mwherescroll.top表示从容器顶部滚动的距离。小演示在这里。
为了检测何时请求更多数据，理想情况下，对象应充当侦听滚动事件的中介。该对象跟踪用户滚动的速度，当用户看起来慢下来或完全停止时，对相应的行发出数据请求。以这种方式检索数据意味着您的数据将是碎片化的，因此在设计缓存时应考虑到这一点。
此外，最大传出连接的浏览器限制也可以发挥重要作用。用户可以滚动到某个位置，这将触发 AJAX 请求，但在此之前，用户可以滚动到其他部分。如果服务器没有足够的响应，请求就会排队，应用程序看起来没有响应。您可以使用请求管理器来路由所有请求，它可以取消挂起的请求以腾出空间。
于 2010-03-14T01:26:12.850 回答
4
我知道这是一个老问题，但仍然......还有dhtmlxGrid可以处理数百万行。有一个包含 50,000 行的演示，但可以在网格中加载/处理的行数是无限的。
免责声明：我来自 DHTMLX 团队。
于 2012-10-02T13:24:02.240 回答
3
免责声明：我长期大量使用YUI DataTable 而没有头疼。它功能强大且稳定。根据您的需要，您可以使用支持的ScrollingDataTable
- x-滚动
- y-滚动
- xy 滚动
- 强大的事件机制
对于您需要的，我认为您想要的是tableScrollEvent。它的 API 说
当固定滚动 DataTable 有滚动时触发。
由于每个 DataTable 都使用一个 DataSource，您可以通过 tableScrollEvent监控其数据以及渲染循环大小，以便根据您的需要填充 ScrollingDataTable。
渲染循环大小说
在您的 DataTable 需要显示整个非常大的数据集的情况下，renderLoopSize 配置可以帮助管理浏览器 DOM 渲染，以便 UI 线程不会被锁定在非常大的表上。任何大于 0 的值都将导致 DOM 渲染在 setTimeout() 链中执行，该链在每个循环中渲染指定数量的行。理想值应根据实现确定，因为没有硬性和快速的规则，只有一般准则：
- 默认情况下，renderLoopSize 为 0，因此所有行都在一个循环中呈现。renderLoopSize > 0 会增加开销，因此请谨慎使用。
- 如果您的数据集足够大（行数 X 列数 X 格式复杂度），用户会在视觉呈现中遇到延迟和/或导致脚本挂起，请考虑设置 renderLoopSize。
- 低于 50 的 renderLoopSize 可能不值得。renderLoopSize > 100 可能更好。
- 一个数据集可能被认为不够大，除非它有成百上千的行。
- renderLoopSize > 0 和 < 总行数确实会导致表格在一个循环中呈现（与 renderLoopSize = 0 相同），但它也会触发功能，例如从单独的 setTimeout 线程处理后呈现行条带化。
例如
// Render 100 rows per loop
var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
renderLoopSize:100
});
<WHERE_DOES_THE_DATA_COME_FROM> 只是一个单一的DataSource。它可以是 JSON、JSFunction、XML 甚至是单个 HTML 元素
在这里你可以看到一个简单的教程，由我提供。请注意，没有其他DATA_TABLE 插件同时支持单击和单击。YUI DataTable 允许你。还有更多，你甚至可以使用 JQuery 而不用头疼
一些例子，你可以看看
随意询问有关 YUI DataTable 的任何其他问题。
问候，
于 2010-03-14T03:44:23.830 回答
3
于 2010-03-16T14:57:11.550 回答
3
我有点看不懂，对于 jqGrid，您可以使用虚拟滚动功能：
http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling
但话又说回来，可以完成数百万行过滤：
http://www.trirand.net/aspnetmvc/grid/performancelinq
我真的看不到“好像没有页面”的意思，我的意思是......没有办法在浏览器中一次显示 1,000,000 行 - 这是 10MB 的 HTML 原始文件，我有点看不到为什么用户不想看到这些页面。
反正...
于 2010-03-23T00:46:58.050 回答
2
我能想到的最佳方法是在滚动结束之前为每个滚动或某些限制加载 json 格式的数据块。json 可以很容易地转换为对象，因此可以很容易地不显眼地构造表行
于 2010-03-08T16:51:39.383 回答
1
我强烈推荐Open rico。一开始很难实施，但一旦抓住它就永远不会回头。
于 2011-11-01T07:16:28.707 回答
1
我知道这个问题已经有几年了，但是 jqgrid 现在支持虚拟滚动：
http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php
但禁用分页
于 2012-08-21T13:49:04.273 回答
0
我建议使用 sigma 网格，sigma 网格已经嵌入了可以支持数百万行的分页功能。而且，您可能需要远程寻呼来执行此操作。查看演示 http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html
于 2010-04-07T02:53:05.747 回答
0
于 2014-05-20T16:15:08.567 回答