我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
我需要呈现大量的行数据(即。数百万行)在一个网格中使用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请求,但在此完成之前,用户可以滚动到其他部分。如果服务器的响应不够快,请求就会排队,应用程序看起来也没有响应。您可以使用一个请求管理器,所有请求都通过它路由,它可以取消挂起的请求以腾出空间。
其他回答
我可以非常肯定地说,您确实不需要向用户显示数百万行数据。
世界上没有任何用户能够理解或管理该数据集,因此即使您在技术上设法实现了它,也无法为该用户解决任何已知问题。
相反,我将关注用户为什么想要查看数据。用户不希望看到数据只是为了看到数据,通常会有一个问题被提出。如果你专注于回答这些问题,那么你就会更接近解决实际问题的方法。
我建议你读一读
http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/
https://github.com/mleibman/SlickGrid/wiki
“SlickGrid利用虚拟渲染,使您能够轻松地处理数十万个项目,而不会降低性能。事实上,使用10行网格和使用10万行网格在性能上没有区别。”
以下是一些最突出的结果:
自适应虚拟滚动(处理数十万行) 极快的渲染速度 背景后期渲染更丰富的单元格 可配置和自定义 全键盘导航 列调整/排序/显示/隐藏 柱自动调整尺寸和力配合 可插入的单元格格式化器和编辑器 支持编辑和创建新行。” 由mleibman
它是免费的(MIT许可证)。 它使用jQuery。
I don't mean to start a flame war, but assuming your researchers are human, you don't know them as well as you think. Just because they have petabytes of data doesn't make them capable of viewing even millions of records in any meaningful way. They might say they want to see millions of records, but that's just silly. Have your smartest researchers do some basic math: Assume they spend 1 second viewing each record. At that rate, it will take 1000000 seconds, which works out to more than six weeks (of 40 hour work-weeks with no breaks for food or lavatory).
他们(或者你)真的认为一个人(看着表格的那个人)能集中那么多注意力吗?他们真的在这一秒内完成了很多事情吗?还是他们(更有可能)过滤掉了不想要的东西?我怀疑,在查看了“合理大小”的子集之后,他们可能会向您描述一个过滤器,该过滤器将自动过滤掉这些记录。
正如paxdiablo和Sleeper Smith和Lasse V Karlsen所暗示的那样,您(和他们)没有仔细考虑需求。从好的方面来看,现在您已经找到了SlickGrid,我确信对这些过滤器的需求变得非常明显。
我推荐带有Buffered View特性的Ext JS Grid。
http://www.extjs.com/deploy/dev/examples/grid/buffer.html