我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
当前回答
我推荐带有Buffered View特性的Ext JS Grid。
http://www.extjs.com/deploy/dev/examples/grid/buffer.html
其他回答
我能想到的最佳方法是在每次滚动或滚动结束前以json格式加载数据块。Json可以很容易地转换为对象,因此可以很容易地不引人注目地构造表行
我建议sigma网格,sigma网格有嵌入分页功能,可以支持数百万行。而且,您可能需要远程分页来完成此操作。 查看演示 http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html
这里有一些优化,你可以应用来加快速度。只是想出来了。
由于行数可能以百万计,因此需要一个仅用于来自服务器的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请求,但在此完成之前,用户可以滚动到其他部分。如果服务器的响应不够快,请求就会排队,应用程序看起来也没有响应。您可以使用一个请求管理器,所有请求都通过它路由,它可以取消挂起的请求以腾出空间。
看看dGrid:
https://dgrid.io/
我同意用户永远不需要同时查看数百万行数据,但是dGrid可以快速显示它们(一次显示一整屏)。
不要把海洋烧开来泡一杯茶。
datagrid提供了数据的JS抽象,因此您可以使用所提供的dojo将其连接到各种后端。数据存储或自己编写。显然,您需要一个支持对这么多记录进行随机访问的系统。DataGrid还提供了完全的可访问性。
请编辑,这里有一个指向Matthew Russell文章的链接,该文章应该会提供您所需要的示例,使用dojox.grid查看数百万条记录。注意,它使用了旧版本的网格,但概念是相同的,只是有一些不兼容的API改进。
哦,它是完全免费的开源软件。