数百万行的JavaScript数据网格 [英] JavaScript data grid for millions of rows

问题描述

我需要使用JavaScript向用户提供大量数据行（即数百万行）。

I need to present a large number of rows of data (ie. millions of rows) to the user in a grid using JavaScript.

用户不应该

相反，应该显示所有的数据都可用。

Rather, it should appear that all of the data are available.

而不是一次下载数据，而是根据用户来到他们（即通过滚动网格）下载小块。

Instead of downloading the data all at once, small chunks are downloaded as the user comes to them (ie. by scrolling through the grid).

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

The rows will not be edited through this front end, so read-only grids are acceptable.

以JavaScript编写的数据网格存在于这种无缝页面？

What data grids, written in JavaScript, exist for this kind of seamless paging?

推荐答案

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

更新
现在已经在 SlickGrid 。

请参阅 http://github.com/mleibman/SlickGrid/issues#issue/22 ，正在讨论如何使SlickGrid使用较大数量的行。

Please see http://github.com/mleibman/SlickGrid/issues#issue/22 for an ongoing discussion on making SlickGrid work with larger numbers of rows.

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

The problem is that SlickGrid does not virtualize the scrollbar itself - the scrollable area's height is set to the total height of all the rows. The rows are still being added and removed as the user is scrolling, but the scrolling itself is done by the browser. That allows it to be very fast yet smooth (onscroll events are notoriously slow). The caveat is that there are bugs/limits in the browsers' CSS engines that limit the potential height of an element. For IE, that happens to be 0x123456 or 1193046 pixels. For other browsers it is higher.

在largenum-fix分支中有一个实验性的解决方法，通过将页面设置为1M像素高度，然后使用这些页面中的相对定位。由于CSS引擎中的高度限制似乎与实际的布局引擎不同，明显低于上述限制。

There is an experimental workaround in the "largenum-fix" branch that raises that limit significantly by populating the scrollable area with "pages" set to 1M pixels height and then using relative positioning within those pages. Since the height limit in the CSS engine seems to be different and significantly lower than in the actual layout engine, this gives us a much higher upper limit.

我还在看以获得无限数量的行数，而不会放弃SlickGrid目前在其他实施中所拥有的性能优势。

I am still looking for a way to get to unlimited number of rows without giving up the performance edge that SlickGrid currently holds over other implementations.

Rudiger，你可以详细说明你如何解决这个问题？

Rudiger, can you elaborate on how you solved this?

这篇关于数百万行的JavaScript数据网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！