数百万行的JavaScript数据网格[关闭]

我需要使用JavaScript在网格中向用户呈现大量数据行（即数百万行）。

用户不应一次看到页面或仅查看有限数量的数据。

相反，应该看起来所有数据都可用。

并非一次下载所有数据，而是在用户访问时下载小块（即，通过滚动网格）。

这些行不会通过此前端进行编辑，因此可接受只读网格。

对于这种无缝分页，存在哪些用JavaScript编写的数据网格？

（免责声明：我是SlickGrid的作者）

更新 现在已在SlickGrid中实现。

请参阅http://github.com/mleibman/SlickGrid/issues#issue/22，以获取有关使SlickGrid与大量行一起工作的正在进行的讨论。

问题在于SlickGrid不会虚拟化滚动条本身-可滚动区域的高度设置为所有行的总高度。用户滚动时，行仍在添加和删除，但是滚动本身是由浏览器完成的。这使得它可以非常快速但流畅（众所周知，滚动事件很慢）。需要注意的是，浏览器的CSS引擎中存在一些错误/限制，这些错误/限制限制了元素的潜在高度。对于IE，恰好是0x123456或1193046像素。对于其他浏览器，它更高。

在“大号固定”分支中有一个实验性的解决方法，它通过将“页面”设置为1M像素高度，然后在这些页面内使用相对位置来填充可滚动区域，从而大大提高了限制。由于CSS引擎中的高度限制似乎有所不同，并且明显低于实际布局引擎中的高度限制，因此这给了我们更高的上限。

我仍在寻找一种方法，以达到无限制的行数而又不放弃SlickGrid当前在其他实现上所拥有的性能优势。

Rudiger，能否详细说明如何解决此问题？

https://github.com/mleibman/SlickGrid/wiki

” SlickGrid利用虚拟渲染使您能够轻松处理数十万个项目而不会降低性能。实际上，使用10行和100000行的网格在性能上没有区别。 ”

一些重点：

• 自适应虚拟滚动（处理数十万行）
• 极快的渲染速度
• 后台渲染更丰富的细胞
• 可配置和可定制
• 全键盘导航
• 列大小调整/重新排序/显示/隐藏
• 色谱柱自动定型和压入
• 可插拔的单元格格式化程序和编辑器
• 支持编辑和创建新行。“由mleibman

它是免费的（MIT许可证）。它使用jQuery。

我认为最好的网格如下：

• Flexigrid： http ：//flexigrid.info/
• jQuery Grid： http ：//www.trirand.com/blog/
• jqGridView： http ://plugins.jquery.com/project/jqGridView
• jqxGrid： http ：//www.jqwidgets.com/
• 英格丽（Ingrid）： http : //reconstrukt.com/ingrid/
• SlickGrid http://github.com/mleibman/SlickGrid
• 数据表 http://www.datatables.net/index
• ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows

我最好的3个选项是jqGrid，jqxGrid和DataTables。它们可以处理数千行，并支持虚拟化。

我并不是要发动一场火焰大战，但是假设您的研究人员是人类，那么您对他们的了解并不如您所想的那样。仅仅因为它们拥有 PB级的数据，就不能使它们能够以任何有意义的方式查看甚至数百万条记录。他们可能会说他们想要查看数百万条记录，但这很愚蠢。让最聪明的研究人员进行一些基本的数学运算：假设他们花1秒钟查看每条记录。以这种速度，将需要1000000秒，这要花费超过六周的时间（每周工作40个小时，不中断食物或洗手间）。

他们（或您）是否真的认为一个人（看着电网的人）可以聚集这种注意力？他们在那一秒钟内真的完成了很多工作，还是（很有可能）过滤掉了不需要的东西？我怀疑在查看“大小合理”的子集之后，他们会为您描述一个过滤器，该过滤器会自动过滤掉那些记录。

正如paxdiablo和Sleeper Smith和Lasse V Karlsen所暗示的那样，您（和他们）没有考虑过这些要求。从好的方面来说，既然您已经找到了SlickGrid，我相信对那些过滤器的需求将立即变得显而易见。

我可以肯定地说，您确实不需要向用户显示数百万行的数据。

世界上没有用户能够理解或管理该数据集，因此即使您从技术上设法将其提取出来，也不会为该用户解决任何已知问题。

相反，我将重点关注用户为什么要查看数据。用户不想仅仅为了查看数据就看到数据，通常会问一个问题。如果您专注于回答这些问题，那么您将更接近解决实际问题的事物。

我建议使用带缓冲视图功能的Ext JS网格。

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

（免责声明：我是w2ui的作者）

我最近写了一篇关于如何实现具有100万条记录的JavaScript网格的文章（http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records）。我发现最终存在3个限制使其无法提高：

1. div的高度有限制（可以通过虚拟滚动来克服）
2. 大约100万条记录后，排序和搜索等操作开始变慢
3. RAM受限制，因为数据存储在JavaScript数组中

我已经用1百万条记录（除了IE）测试了网格，并且性能良好。请参阅文章以获取演示和示例。

dojox.grid.DataGrid为数据提供了JS抽象，因此您可以使用提供的dojo.data存储库将其连接到各种后端，也可以编写自己的存储库。显然，您需要一个支持对这么多记录进行随机访问的记录。DataGrid还提供了完全可访问性。

编辑后，这里是Matthew Russell文章的链接，该文章应提供您所需的示例，并使用dojox.grid查看数百万条记录。请注意，它使用的是旧版本的网格，但是概念相同，只是对API进行了一些不兼容的改进。

哦，它是完全免费的开源。

我使用了jQuery Grid Plugin，很好。

演示版

这里有一些优化可以使您加快速度。只是大声思考。

由于行数可以是数百万，因此您将需要一个仅用于服务器中JSON数据的缓存系统。我无法想象有人要下载所有X百万个项目，但是如果这样做，那将是一个问题。在Chrome上对20M +整数数组进行的这项小测试不断在我的计算机上崩溃。

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

您可以使用LRU或其他某种缓存算法，并对愿意缓存多少数据有一个上限。

对于表单元本身，我认为构造/销毁DOM节点可能会很昂贵。相反，您可以预定义X个单元格，并且每当用户滚动到新位置时，就将JSON数据注入这些单元格中。滚动条实际上​​与表示整个数据集所需的空间（高度）没有直接关系。您可以任意设置表容器的高度，例如5000px，并将其映射到总行数。例如，如果容器的高度为5000px，并且总共有1000万行，则starting row ≈ (scroll.top/5000) * 10Mwhere scroll.top表示从容器顶部开始的滚动距离。这里的小演示。

为了检测何时请求更多数据，理想情况下，对象应充当侦听滚动事件的中介者。该对象跟踪用户滚动的速度，并在看起来用户减速或完全停止时向相应的行发出数据请求。以这种方式检索数据意味着您的数据将要碎片化，因此在设计缓存时应牢记这一点。

同样，浏览器对最大传出连接的限制也可以发挥重要作用。用户可以滚动到某个位置，这将触发AJAX请求，但是在此之前，用户可以滚动到其他部分。如果服务器的响应速度不够快，则请求将排队，并且应用程序将无响应。您可以使用通过其路由所有请求的请求管理器，并且可以取消挂起的请求以腾出空间。

我知道这是一个老问题，但仍然..还有dhtmlxGrid可以处理数百万行。有一个具有50,000行的演示但是可以在网格中加载/处理的行数是无限的。

免责声明：我来自DHTMLX小组。

我建议你读这个

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

免责声明：我大量使用YUI数据表 不无头痛了很久。它功能强大且稳定。为了满足您的需要，您可以使用ScrollingDataTable支持

• X滚动
• y滚动
• xy滚动
• 强大的事件机制

对于您所需要的，我认为您想要的是tableScrollEvent。它的API说

当固定滚动的DataTable滚动时触发。

由于每个DataTable使用一个DataSource，因此您可以通过tableScrollEvent 以及呈现循环大小来监视其数据，以便根据需要填充ScrollingDataTable。

渲染循环大小说

如果您的DataTable需要显示非常大的数据集的整体，则renderLoopSize配置可以帮助管理浏览器DOM渲染，以使UI线程不会被锁定在非常大的表上。任何大于0的值都将导致在setTimeout（）链中执行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>仅仅是一个数据源。它可以是JSON，JSFunction，XML甚至是单个HTML元素

在这里您可以看到我提供的简单教程。请注意，没有其他 DATA_TABLE插件同时支持单击和双击。YUI DataTable允许您。而且，即使没有JQuery，您也可以使用它

一些例子，你可以看到

• 项目清单

随意询问有关YUI DataTable的任何其他信息。

问候，

我有点不明白这一点，对于jqGrid，您可以使用虚拟滚动功能：

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

但是再一次，可以完成数百万行的过滤：

http://www.trirand.net/aspnetmvc/grid/performancelinq

我真的看不到“好像没有页面”的意思，我的意思是……无法在浏览器中一次显示1,000,000行-这是10MB的HTML原始数据，我有点看不到为什么用户不想看到这些页面。

无论如何...

我能想到的最佳方法是在滚动结束之前为每个滚动或某个限制加载json格式的数据块。json可以轻松转换为对象，因此可以轻松地构造表行

我强烈推荐Open rico。从一开始就很难实现，但是一旦掌握了它就永远不会回头。

我知道这个问题已有几年历史了，但是jqgrid现在支持虚拟滚动：

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

但是分页被禁用

我建议sigma网格，sigma网格嵌入了可以支持数百万行的分页功能。而且，您可能需要进行远程分页。参见演示 http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

看一下dGrid：

https://dgrid.io/

我同意用户永远都不需要一次查看数百万行数据，但是dGrid可以快速显示它们（一次显示一个屏幕）。

不要煮大海来泡茶。