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

javascript jquery html datagrid slickgrid

2022-08-30 00:56:55

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

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

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

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

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

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

答案 1

(免责声明：我是SlickGrid的作者)

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

请参阅 http://github.com/mleibman/SlickGrid/issues#issue/22，了解有关使 SlickGrid 处理大量行的持续讨论。

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

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

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

吕迪格，你能详细说说你是怎么解决这个问题的吗？

答案 2

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

"SlickGrid 利用虚拟渲染，使您能够轻松处理数十万个项目，而不会降低性能。实际上，使用包含 10 行的网格与使用 100'000 行的网格在性能上没有差异。"

一些亮点：

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

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