数百万行的JavaScript数据网格

Question

数百万行的JavaScript数据网格

Rud*_*ger 223 javascript jquery html5 datagrid slickgrid

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

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

相反,似乎所有数据都可用.

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

不会通过此前端编辑行,因此可以使用只读网格.

这种无缝分页存在哪些用JavaScript编写的数据网格？

Answer 1

Tin*_*Tin 190

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

更新现在已在SlickGrid中实现.

请参阅http://github.com/mleibman/SlickGrid/issues#issue/22,了解有关使SlickGrid使用大量行的持续讨论.

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

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

我仍然在寻找一种方法来获得无限数量的行,而不会放弃SlickGrid目前在其他实现上所具有的性能优势.

鲁迪格,你能详细说明你是如何解决这个问题的吗？

非常感谢,我尝试了很多网格,没有人接近SlickGrid的性能 (10认同)
你摇滚,莱布曼先生!很抱歉没有详细说明我是如何解决这个问题的; NDA和我令人尴尬的hackish解决方案使我无法回应.但是,我已经将我的黑客换成无限行,我印象深刻.SlickGrid现在是这个问题的真正答案......我欠你一杯啤酒! (4认同)

Answer 2

And*_*ass 84

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

" SlickGrid利用虚拟渲染,使您能够轻松处理数十万个项目,而不会降低性能.事实上,使用10行网格与100,000行之间的性能没有差别. "

一些亮点:

自适应虚拟滚动(处理数十万行)
极快的渲染速度
富集细胞的背景后期渲染
可配置和可定制
全键盘导航
列调整大小/重新排序/显示/隐藏
柱自动调整和力配合
可插入单元格格式器和编辑器
支持编辑和创建新行."通过mleibman

它是免费的(麻省理工学院许可证).它使用jQuery.

"使用10行与10万行的网格之间的性能没有差别"可能只是意味着它在处理10行时也很糟糕:-) (43认同)
@Rudiger:SlickGrid现在支持无限数量的行.请参阅http://github.com/mleibman/SlickGrid/tree/unlimited-rows.一旦彻底测试,它将合并到主分支中. (8认同)
它需要一些工作,但我做了一些更改,使网格独立于`data`数组的长度.它是一个kludge,但我有响应填充`bigdata`数组,而较小的`data`来自`bigdata`数组.程序的其余部分使用较小的数据数组,除了滚动条测量和一些其他地方现在无限制的大量行.总而言之,比写我自己容易得多. (6认同)
@paxdiablo:很好听.这证明了作者也非常精通营销演讲.:-) (5认同)

Answer 3

小智 35

我认为最好的网格如下:

Flexigrid: http ://flexigrid.info/
jQuery Grid: http ://www.trirand.com/blog/
jqGridView: http ://plugins.jquery.com/project/jqGridView
jqxGrid: http ://www.jqwidgets.com/
英格丽德: http ://reconstrukt.com/ingrid/
SlickGrid http://github.com/mleibman/SlickGrid
DataTables http://www.datatables.net/index
ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows

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

拧紧SO的5分钟评论编辑限制.#1 - jqGrid - [1000+提交](https://github.com/tonytomov/jqGrid); #2 - [752 for DataTables](https://github.com/DataTables/DataTables); #3 - [491 for SlickGrid](https://github.com/mleibman/SlickGrid); #4 - [33为Flexigrid提交](https://github.com/paulopmx/Flexigrid).Ingrid - [自2011年6月以来没有更新](http://code.google.com/p/jq-ingrid/source/list).jqGridView - [自2009年以来没有更新](http://sourceforge.net/projects/jqgridview/) (12认同)
在之前的评论的基础上,我在这里包括每个项目的叉子数量:#1 - SlickGrid - 670个叉子; #2 - jqGrid - 358叉; #3 - Flexigrid - 238; #4 - DataTables - 216; #5 - 英格丽德 - 41; #6 - jqGridView - 0; (3认同)

Answer 4

Dan*_*ith 25

我并不是要开始一场火焰战争,但假设你的研究人员是人类,你不会像你想象的那样了解它们.仅仅因为他们拥有数 PB的数据并不能使他们以任何有意义的方式查看数百万条记录.他们可能会说他们希望看到数百万条记录,但这只是愚蠢的.让你最聪明的研究人员做一些基本的数学运算:假设他们花1秒钟查看每条记录.按照这个速度,它将需要1000000秒,这将超过六周(40小时工作周,没有食物或盥洗室休息).

他们(或你)认真地认为一个人(看着网格的人)可以集中注意力吗？他们真的在1秒内完成了很多工作,还是他们(更有可能)过滤掉了不想要的东西？我怀疑在查看"合理大小"的子集后,他们可以向您描述一个过滤器,它会自动过滤掉那些记录.

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

如果它是一个用于自己分析的数据转储,那么它就不会显示在网页的网格中,不是吗？ (10认同)
我不必一次看到它们.这就是列排序和`Ctrl + F`的用途.替代方案(寻呼,网站搜索)**更糟糕.在尝试滚动浏览问题或答案时,只需查看StackOverflow,Reddit就可以滚动浏览用户的评论历史记录.排序和即时搜索提供了Windows资源管理器所具有的功能,但网站缺乏. (5认同)
需要数百万行并不总是与查看它们有关。有时，客户希望部分转储记录以在自己的数据分析系统中运行。 (2认同)

Answer 5

ang*_*son 15

我可以非常肯定地说,你真的不需要向用户显示数百万行数据.

世界上没有任何用户能够理解或管理该数据集,因此即使您在技术上设法将其关闭,您也无法解决该用户的任何已知问题.

相反,我将集中在为什么用户想要看到的数据.用户不希望看到数据只是为了查看数据,通常会有一个问题.如果你专注于回答那些问题,那么你就会更接近解决实际问题的东西.

我的用户是习惯于*PB级数据的研究人员.我想我比我更了解我的用户,尽管在一般情况下你肯定是对的.至于*why*,这个数据网格只是管理大数据的一组工具的一部分. (16认同)

Answer 6

ric*_*ent 7

我推荐使用具有缓冲视图功能的Ext JS Grid.

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

Answer 7

pel*_*ler 6

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

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

哦,这是完全免费的开源.

Answer 8

小智 6

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

我最近写了一篇关于如何实现包含100万条记录的JavaScript网格的文章(http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records).我发现最终有3个限制阻止它更高:

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

我已经用100万条记录(IE除外)测试了网格,并且表现良好.有关演示和示例,请参阅文章.

归档时间：	15 年，7 月前
查看次数：	181103 次
最近记录：	6 年，1 月前