logo标签列表

在JavaScript中处理大型网格数据集

javascriptjqueryasp.net-mvcextjssproutcore
3
有哪些更好的解决方案可以使用JavaScript处理大型数据集（100K）？特别是，如果您具有多列排序和搜索功能，如何处理获取（和预取）数据、客户端模型绑定（用于显示）和缓存数据。
我想一个好的解决方案是在后台进行一些周密的工作。例如，最初，如果表格显示N个项目，它可能会提取2N个项目，返回用户的数据，然后在后台获取下一个2N个项目（即使用户没有请求）。随着用户进行搜索/排序更改，它将放弃（或甚至缓存初始基本情况），并执行类似的功能。
你能分享你见过的最好的解决方案吗？
谢谢
2
你认为向用户展示10万行数据是良好的用户体验吗？ - John Farrell
@jfar：如果用户要求100k行数据，那么是的，一定要显示给他们。我曾经使用过一个产品，它将其数据网格显示任意限制在2,000条记录内，这真的非常令人沮丧。 - josh3736
2
@josh3736 > 2000 != 100,000，人类能够合理地解析100k记录以执行任何有意义的活动吗？ - John Farrell
@jfar：在我所讲述的特定情况下，我将查看我构建的查询结果。如果我只想扫描结果列表（无论是 2,500 条还是 100,000 条记录）以进行抽样检查（作为确保我的查询正确的一种方式），那么我就会遇到困难。有时候能够查看整个数据集是非常有用的，即使您并不一定要"解析"每条记录。底线是：不要根据您自己的假设限制用户；每个人的工作方式都不同。 - josh3736
我明白你的意思。我在谈论对个人施加的最大认知负荷。按照你的逻辑，我们应该给他们管理工作室并教他们如何使用SELECT * FROM table。;) - John Farrell
谁说要显示10万行了？这就是N的作用，即显示100K可用行中的N行。 - teleball
5个回答
3
使用像DataTables这样的jQuery表格插件：http://datatables.net/ 它支持服务器端处理来进行排序、筛选和分页。并且它包括管道支持，以预取下x页记录：http://www.datatables.net/examples/server_side/pipeline.html 实际上，DataTables插件有4种不同的工作方式： 1. 使用HTML表格，因此您可以发送一堆HTML，然后让所有排序、筛选和分页在客户端完成。 2. 使用JavaScript数组，因此您可以发送一个二维数组，让它从中创建表格。 3. Ajax源-这对您来说不是很适用。 4. 服务器端，在其中将数据以JSON格式发送到空表格，并让DataTables接管。
3

SlickGrid可以完美的完成你所需要的功能。（演示）

使用AJAX数据存储，SlickGrid可以处理数百万行而不会受影响。

2
由于您标记了此问题为Ext JS，如果您还没有看到它，我会向您指出Ext.ux.LiveGrid。源代码可用，因此您可以查看并了解他们如何解决此问题。这是Ext JS世界中广受欢迎和广泛使用的扩展。
话虽如此，我个人认为（几乎）加载那么多数据对用户体验毫无用处。手动拖动滚动条（每像素跳过数百条记录）远不如直接输入您想要的内容。与向用户呈现如此多的数据相比，我更喜欢一些强大的过滤/搜索功能。
如果您去Google，而不是搜索框，它只加载整个互联网成为一个长长的虚拟列表，您必须滚动以找到您的站点... :)
指出整个“你为什么要这样做”的问题是非常重要的，这点值得肯定。 - hvgotcodes
1
1

这取决于数据将如何使用。

对于大型数据集，浏览器的查找功能足够时，只返回一个简单的HTML表格就很有效。它需要一些时间来加载，但在旧的、较慢的客户端上显示响应迅速，而且您永远不必担心它会出问题。

当客户端进行排序和搜索，并且您没有一次性显示整个表格时，我让服务器通过XMLHTTPRequest发送制表符分隔的表格，在浏览器中解析它们并使用列表=String.split('\n')更新显示，通过重复调用$('node').innerHTML='blah'。JS引擎可以相当有效地存储长字符串。这比显示、隐藏和重新排列DOM节点要快得多。动态创建和销毁新的DOM节点非常缓慢。按需将每行分成字段似乎是可行的；我还没有尝试过这种程度的自由度。

我从未尝试过明显的预取和后台技巧，因为这些其他方法已经足够好了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接