我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。

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

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

不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。

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

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


当前回答

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

由于行数可能以百万计,因此需要一个仅用于来自服务器的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请求,但在此完成之前,用户可以滚动到其他部分。如果服务器的响应不够快,请求就会排队,应用程序看起来也没有响应。您可以使用一个请求管理器,所有请求都通过它路由,它可以取消挂起的请求以腾出空间。

其他回答

我知道这是个老问题,但是…还有dhtmlxGrid可以处理数百万行。有一个演示有50,000行,但可以在网格中加载/处理的行数是无限的。

免责声明:我来自DHTMLX团队。

在我看来,最好的网格如下:

Flexigrid: http://flexigrid.info/ jQuery网格:http://www.trirand.com/blog/ jqGridView: http://plugins.jquery.com/project/jqGridView jqxGrid: https://www.jqwidgets.com/ 英格丽德:http://reconstrukt.com/ingrid/ SlickGrid http://github.com/mleibman/SlickGrid

datatable http://www.datatables.net/index

屏蔽 http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows 智能电网 https://www.htmlelements.com/demos/grid/overview/

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

我推荐带有Buffered View特性的Ext JS Grid。

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

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

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

但是禁用了分页

datagrid提供了数据的JS抽象,因此您可以使用所提供的dojo将其连接到各种后端。数据存储或自己编写。显然,您需要一个支持对这么多记录进行随机访问的系统。DataGrid还提供了完全的可访问性。

请编辑,这里有一个指向Matthew Russell文章的链接,该文章应该会提供您所需要的示例,使用dojox.grid查看数百万条记录。注意,它使用了旧版本的网格,但概念是相同的,只是有一些不兼容的API改进。

哦,它是完全免费的开源软件。