数百万行的JavaScript数据网格[关闭]

2020/10/13 09:41 · javascript ·  · 0评论

我需要使用JavaScript在网格中向用户呈现大量数据行(即数百万行)。

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

相反,应该看起来所有数据都可用。

并非一次下载所有数据,而是在用户访问它们时下载小块(即,通过滚动网格)。

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

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

免责声明:我是SlickGrid的作者

更新
现在已在
SlickGrid中实现

请参阅http://github.com/mleibman/SlickGrid/issues#issue/22,以获取有关使SlickGrid与大量行一起工作的正在进行的讨论。

问题在于SlickGrid不会虚拟化滚动条本身-可滚动区域的高度设置为所有行的总高度。用户滚动时,行仍在添加和删除,但滚动本身是由浏览器完成的。这使它可以非常快速而流畅(众所周知,滚动事件很慢)。需要注意的是,浏览器的CSS引擎中存在一些错误/限制,这些错误/限制限制了元素的潜在高度。对于IE,恰好是0x123456或1193046像素。对于其他浏览器,它更高。

在“大号固定”分支中有一个实验性的解决方法,它通过使用“页面”设置为1M像素高度填充可滚动区域,然后在这些页面中使用相对定位,来显着提高该限制。由于CSS引擎中的高度限制似乎有所不同,并且明显低于实际布局引擎中的高度限制,因此这给了我们更高的上限。

我仍在寻找一种方法,以达到无限制的行数而又不放弃SlickGrid当前在其他实现上所拥有的性能优势。

Rudiger,能否详细说明如何解决此问题?

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

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

一些重点:

  • 自适应虚拟滚动(处理数十万行)
  • 极快的渲染速度
  • 后台渲染更丰富的细胞
  • 可配置和可定制
  • 全键盘导航
  • 列调整大小/重新排序/显示/隐藏
  • 色谱柱自动定型和压入
  • 可插拔的单元格格式化程序和编辑器
  • 支持编辑和创建新行。“由mleibman

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

我认为最好的网格如下:

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

我并不是要发动一场火焰大战,但是假设您的研究人员是人类,那么您对他们的了解并不如您所想的那样。仅仅因为它们具有PB级的数据,就不能使它们能够以任何有意义的方式查看甚至数百万条记录。他们可能会说他们查看数百万条记录,但这很愚蠢。让最聪明的研究人员做一些基本的数学运算:假设他们花1秒钟查看每条记录。以这种速度,将需要1000000秒,这要花费超过六周的时间(每周工作40个小时,不中断食物或洗手间)。

他们(或您)是否真的认为一个人(看着电网的人)可以聚集这种注意力?他们在那一秒钟内真的完成了很多工作,还是(很有可能)过滤掉了不需要的东西我怀疑在查看“大小合理”的子集之后,他们可能会为您描述一个过滤器,该过滤器会自动过滤掉那些记录。

正如paxdiablo和Sleeper Smith和Lasse V Karlsen所暗示的那样,您(和他们)没有考虑所有要求。从好的方面来说,既然您已经找到了SlickGrid,我相信对这些过滤器的需求将立即变得显而易见。

我可以肯定地说,您确实不需要向用户显示数百万行的数据。

世界上没有用户能够理解或管理该数据集,因此即使您从技术上设法将其提取出来,也不会为该用户解决任何已知问题。

相反,我将重点关注用户为什么要查看数据。用户不想仅仅为了查看数据就看到数据,通常会提出一个问题。如果您专注于回答这些问题,那么您将更接近解决实际问题的事物。

我建议使用具有缓冲视图功能的Ext JS网格。

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

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

我最近写了一篇有关如何实现具有100万条记录的JavaScript网格的文章(http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records)。我发现最终存在3个限制使其无法提高:

  1. div的高度有限制(可以通过虚拟滚动来克服)
  2. 一百万条左右的记录后,排序和搜索等操作开始变慢
  3. RAM受限制,因为数据存储在JavaScript数组中

我已经用1百万条记录(除了IE)测试了网格,并且它表现良好。有关演示和示例,请参见文章。

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

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

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

我使用了jQuery Grid Plugin,很好。

演示版

这里有一些优化可以使您加快速度。只是大声思考。

由于行数可以是数百万,因此您将需要一个仅用于服务器中JSON数据的缓存系统。我无法想象有人要下载所有X百万个项目,但如果这样做,那将是一个问题。在Chrome上对20M +整数数组进行的这项小测试不断在我的计算机上崩溃。

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

您可以使用LRU或其他某种缓存算法,并对愿意缓存多少数据有一个上限。

对于表格单元本身,我认为构造/销毁DOM节点可能会很昂贵。相反,您可以预定义X个单元格,并且每当用户滚动到新位置时,就将JSON数据注入这些单元格中。滚动条实际上​​与表示整个数据集所需的空间(高度)没有直接关系。您可以任意设置表容器的高度,例如5000px,并将其映射到总行数。例如,如果容器的高度为5000px,并且总共有1000万行,则starting row ≈ (scroll.top/5000) * 10Mwherescroll.top表示从容器顶部开始的滚动距离。这里的小演示

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

浏览器对最大传出连接的限制也可以发挥重要作用。用户可以滚动到某个位置,这将触发AJAX请求,但是在此之前,用户可以滚动到其他部分。如果服务器的响应速度不够,则请求将排队,并且应用程序将无响应。您可以使用通过其路由所有请求的请求管理器,并且可以取消挂起的请求以腾出空间。

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

免责声明:我来自DHTMLX小组。

我建议你读这个

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

免责声明:我长时间大量使用YUI DataTable 而不感到头痛它功能强大且稳定。为了满足您的需要,您可以使用ScrollingDataTable支持

  • X滚动
  • y滚动
  • xy滚动
  • 强大的事件机制

对于您所需要的,我认为您想要的是tableScrollEvent它的API说

当固定的滚动DataTable滚动时触发。

由于每个DataTable使用一个DataSource,因此您可以通过tableScrollEvent以及呈现循环大小来监视其数据,以便根据需要填充ScrollingDataTable。

渲染循环大小说

如果您的DataTable需要显示非常大的一组数据的整体,则renderLoopSize配置可以帮助管理浏览器DOM渲染,以使UI线程不会被锁定在非常大的表上任何大于0的值都将导致在setTimeout()链中执行DOM渲染,该setTimeout()链在每个循环中渲染指定的行数。由于没有硬性规定和快速规则,只有一般准则,因此应该根据实现确定理想值:

  • 默认情况下,renderLoopSize为0,因此所有行均在单个循环中呈现。renderLoopSize> 0会增加开销,因此请谨慎使用。
  • 如果您的数据集足够大(行数X列数X格式复杂度),使用户在视觉渲染中遇到延迟和/或导致脚本挂起,请考虑设置renderLoopSize
  • 小于50的renderLoopSize可能不值得。renderLoopSize> 100可能更好。
  • 除非数据集具有数百行和数百行,否则可能认为该数据集不够大。
  • 具有renderLoopSize> 0和<总行数的确会导致表在一个循环中呈现(与renderLoopSize = 0相同),但它还会触发功能,例如从单独的setTimeout线程处理渲染后行条带化。

例如

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM>只是一个数据源它可以是JSON,JSFunction,XML甚至是单个HTML元素

在这里您可以看到我提供的简单教程。请注意,没有其他DATA_TABLE插件同时支持单击和双击。YUI DataTable允许您。而且,即使没有JQuery您也可以使用它

一些例子,你可以看到

随意询问有关YUI DataTable的任何其他信息。

问候,

我有点不明白这一点,对于jqGrid,您可以使用虚拟滚动功能:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

但是再一次,可以完成数百万行的过滤:

http://www.trirand.net/aspnetmvc/grid/performancelinq

我真的看不到“好像没有页面”的意思,我的意思是……无法在浏览器中一次显示1,000,000行-这是10MB的HTML原始数据,我有点看不到为什么用户不想看到这些页面。

无论如何...

我能想到的最好的方法是在滚动结束之前为每个滚动或某个限制加载json格式的数据块。json可以轻松转换为对象,因此可以轻松地构造表行

我强烈推荐Open rico从一开始就很难实现,但是一旦您掌握了它,就永远不会回头。

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

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

但分页禁用

我建议使用sigma网格,sigma网格具有可支持数百万行的分页功能。而且,您可能需要进行远程分页。参见演示
http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

看一下dGrid:

https://dgrid.io/

我同意用户永远都不需要一次查看数百万行数据,但是dGrid可以快速显示它们(一次显示一个屏幕)。

不要煮大海来泡茶。

本文地址:http://javascript.askforanswer.com/shubaiwanxingdejavascriptshujuwanggeguanbi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!