我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
当前回答
看看dGrid:
https://dgrid.io/
我同意用户永远不需要同时查看数百万行数据,但是dGrid可以快速显示它们(一次显示一整屏)。
不要把海洋烧开来泡一杯茶。
其他回答
我使用了jQuery网格插件,这是很好的。
演示
这里有一些优化,你可以应用来加快速度。只是想出来了。
由于行数可能以百万计,因此需要一个仅用于来自服务器的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请求,但在此完成之前,用户可以滚动到其他部分。如果服务器的响应不够快,请求就会排队,应用程序看起来也没有响应。您可以使用一个请求管理器,所有请求都通过它路由,它可以取消挂起的请求以腾出空间。
我有点看不到这一点,对于jqGrid,你可以使用虚拟滚动功能:
http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling
但话又说回来,数百万行的过滤可以完成:
http://www.trirand.net/aspnetmvc/grid/performancelinq
我真的不明白“好像没有书页”的意义,我的意思是……没有办法在浏览器中一次显示1,000,000行——这是10MB的原始HTML,我有点不明白为什么用户不想看到这些页面。
无论如何……
我能想到的最佳方法是在每次滚动或滚动结束前以json格式加载数据块。Json可以很容易地转换为对象,因此可以很容易地不引人注目地构造表行
我知道这个问题已经存在几年了,但是jqgrid现在支持虚拟滚动:
http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php
但是禁用了分页