数百万行的 JavaScript 数据网格

IT技术 javascript jquery html datagrid slickgrid
2021-02-05 16:40:37

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

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

相反，似乎所有数据都可用。

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

行不会通过这个前端编辑，所以只读网格是可以接受的。

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

6个回答

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

更新 现在已经在SlickGrid 中实现了。

请参阅http://github.com/mleibman/SlickGrid/issues#issue/22以获取有关使 SlickGrid 处理更多行的持续讨论。

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

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

我仍在寻找一种方法来获得无限数量的行，而不会放弃 SlickGrid 目前相对于其他实现的性能优势。

Rudiger，你能详细说明你是如何解决这个问题的吗？

我发现 SlickGrid 是最吸引人的——尤其是当你使用 jQuery 时。恭喜！（尤其是伟大的态度和坚持。）:-)
2021-03-23 16:40:37
SlickGrid v2.1 对列和行使用虚拟滚动。此外，列溢出问题已得到解决。
2021-03-26 16:40:37
我正在尝试使用 slickgrid 来显示 excel 标题，并且我看到当有太多列时， slickgrid 只会优化行的滚动而不是列的滚动。我还注意到，当有超过 120 列左右时 - slickgrid 将新行放在新行中。可以在文件的某处设置最大行数吗？
2021-04-06 16:40:37
@Tin - 这与我的方法相似；我比我的时代提前了很多年！“用于在 Web 应用程序中构建无限滚动的惰性块布局原语。” docs.google.com/document/d/...
2021-04-07 16:40:37
@Rudiger 是的，我大约一个月前在 Blink 小组中看到过这个，但我不太确定这与图片相符。懒惰的布局对实际存在于 DOM 中的元素进行操作，这是我们无法真正做到的。请详细说明 ：）
2021-04-07 16:40:37

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

“ SlickGrid 利用虚拟渲染使您能够轻松处理数十万个项目，而不会降低性能。事实上，处理 10 行与 100'000 行的网格之间的性能没有区别。 ”

一些亮点：

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

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

这需要一些工作，但我做了一些更改，使网格独立于data数组的长度。这是一个混乱，但我有填充bigdata数组的响应，并且data从bigdata数组中提取较小的值。程序的其余部分使用较小的数据数组，除了滚动条测量和其他一些现在对大量行无界的地方。总而言之，比写我自己的要容易得多。
2021-03-21 16:40:37
我正在尝试使用 slickgrid 来显示 excel 标题，并且我看到当有太多列时， slickgrid 只会优化行的滚动而不是列的滚动。我还注意到，当有超过 120 列左右时 - slickgrid 将新行放在新行中。可以在文件的某处设置最大行数吗？
2021-03-22 16:40:37
它可以正常工作，直到精确到 131,001 行......也就是说，有一行这样的代码：data.length = Math.min(131000, parseInt(resp.total));......当然，硬编码是有原因的:(
2021-03-25 16:40:37
@Rudiger：SlickGrid 现在支持无限数量的本机行。请参阅github.com/mleibman/SlickGrid/tree/unlimited-rows。一旦经过彻底测试，它将合并到主分支中。
2021-03-31 16:40:37
如果你想要一些非常快的东西，不要依赖任何使用 jquery 在核心中做事情的东西，而是使用 innerHTML 而不是 DOM append。Javascript 滚动条在速度较慢的计算机上可能明显比浏览器滚动条慢，避免复杂的 css 规则，您应该花时间简化单行的布局。在这种情况下，微观优化可能是有意义的。这只是提高性能的一般做法。jsPerf.com 是您的朋友。
2021-04-12 16:40:37

我认为最好的网格如下：

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

拧 SO 的 5 分钟评论编辑限制。#1 - jqGrid - 1000+ 次提交；#2 - 752 用于数据表；#3 - SlickGrid 为 491；#4 - Flexigrid 的 33 次提交。Ingrid -自 2011 年 6 月以来没有更新。jqGridView -自 2009 年以来没有更新
2021-03-20 16:40:37
我可以评论说 Slickgrid 仍然存在并且很好，但是上面引用的 mleibman 存储库已经死了。新链接：github.com/6pac/SlickGrid（mleibman 在他的 repo 的最后一个注释中引用了它），或 www.slickgrid.net
2021-03-23 16:40:37
2021-03-28 16:40:37
基于之前的评论，我在这里包括了每个项目的分叉数量：#1 - SlickGrid - 670 个分叉；#2 - jqGrid - 358 个叉子；#3 - Flexigrid - 238；#4 - 数据表 - 216；#5 - 英格丽德 - 41；#6 - jqGridView - 0;
2021-04-07 16:40:37
列表 +1，尽管在比较方面并不多。一个好的开始是添加每个提交的数量 - 截至目前，Flexigrid 为 33，而 SlickGrid 为 491。
2021-04-08 16:40:37

我并不是要开始一场火焰战争，但假设你的研究人员是人类，你并不像你想象的那样了解他们。仅仅因为他们拥有数PB 的数据并不能使他们能够以任何有意义的方式查看数百万条记录。他们可能会说他们想要查看数百万条记录，但这太愚蠢了。让最聪明的研究人员做一些基本的数学计算：假设他们花 1 秒钟查看每条记录。按照这个速度，这将需要 1000000 秒，这将超过六周（每周工作 40 小时，不吃东西或上厕所）。

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

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

如果它是供他们自己分析的数据转储，那么它就不会显示在网页上的网格中，是吗？
2021-03-15 16:40:37
需要数百万行并不总是要查看它们。有时，客户需要部分转储记录，以便在他们自己的数据分析系统中运行。
2021-03-27 16:40:37
我不必一次看到它们。这就是列排序Ctrl+F的用途。替代方案（分页、网站搜索）要糟糕得多。尝试滚动浏览问题或答案时只需查看 StackOverflow，Reddit 即可滚动浏览用户的评论历史记录。排序和即时搜索提供了 Windows 资源管理器所具有的功能，但网站缺乏这种功能。
2021-03-31 16:40:37

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

世界上没有用户能够理解或管理该数据集，因此即使您在技术上设法实现了它，您也无法为该用户解决任何已知问题。

相反，我将集中在为什么用户想要看到的数据。用户不想看数据只是为了看数据，通常会有一个问题被问到。如果您专注于回答这些问题，那么您将更接近解决实际问题的方法。

我的用户是习惯于PB级数据的研究人员。我想我比你更了解我的用户，尽管在一般情况下你肯定是对的。至于为什么，这个数据网格只是一组用于管理大数据的工具的一部分。
2021-03-23 16:40:37
其它你可能感兴趣的问题
上一篇iOS JavaScript 桥接器 下一篇React 函数式无状态组件、PureComponent、Component；有什么区别，我们什么时候应该使用什么？