我知道这个问题已经存在几年了，但是jqgrid现在支持虚拟滚动:

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

但是禁用了分页

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

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

以下是一些最突出的结果:

自适应虚拟滚动(处理数十万行) 极快的渲染速度 背景后期渲染更丰富的单元格 可配置和自定义 全键盘导航 列调整/排序/显示/隐藏 柱自动调整尺寸和力配合 可插入的单元格格式化器和编辑器 支持编辑和创建新行。” 由mleibman

它是免费的(MIT许可证)。 它使用jQuery。

我建议你读一读

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

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

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

有关如何使SlickGrid工作于大量行的讨论，请参阅http://github.com/mleibman/SlickGrid/issues#issue/22。

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.

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

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

吕迪格，你能详细解释一下你是怎么解决的吗?

我能想到的最佳方法是在每次滚动或滚动结束前以json格式加载数据块。Json可以很容易地转换为对象，因此可以很容易地不引人注目地构造表行

这里有一些优化，你可以应用来加快速度。只是想出来了。

由于行数可能以百万计，因此需要一个仅用于来自服务器的JSON数据的缓存系统。我无法想象有人想要下载全部X万个项目，但如果他们这么做了，这就会成为一个问题。这个小测试在Chrome上的一个数组上20M+整数崩溃在我的机器上不断。

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

您可以使用LRU或其他缓存算法，并设置愿意缓存的数据量的上限。

For the table cells themselves, I think constructing/destroying DOM nodes can be expensive. Instead, you could just pre-define X number of cells, and whenever the user scrolls to a new position, inject the JSON data into these cells. The scrollbar would virtually have no direct relationship to how much space (height) is required to represent the entire dataset. You could arbitrarily set the table container's height, say 5000px, and map that to the total number of rows. For example, if the containers height is 5000px and there are a total of 10M rows, then the starting row ≈ (scroll.top/5000) * 10M where scroll.top represents the scroll distance from the top of the container. Small demo here.

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

此外，浏览器对最大传出连接的限制也可以发挥重要作用。用户可以滚动到某个位置，该位置将触发AJAX请求，但在此完成之前，用户可以滚动到其他部分。如果服务器的响应不够快，请求就会排队，应用程序看起来也没有响应。您可以使用一个请求管理器，所有请求都通过它路由，它可以取消挂起的请求以腾出空间。