数百万行的 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.

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

The user shouldn't see pages or view only finite amounts of data at a time.

相反，所有数据都应该可用.

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 没有虚拟化滚动条本身——可滚动区域的高度设置为所有行的总高度.当用户滚动时，行仍在添加和删除，但滚动本身是由浏览器完成的.这使它非常快而流畅(众所周知，滚动事件非常慢).需要注意的是，浏览器的 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"分支中有一个实验性的解决方法，通过将页面"设置为 100 万像素高度填充可滚动区域，然后在这些页面中使用相对定位，显着提高了该限制.由于 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屋！