用JavaScript处理大型网格数据集

Question

用JavaScript处理大型数据集（100K）的一些更好的解决方案是什么？特别是，如果您具有多列排序和搜索功能，您如何处理数据提取（和预取），客户端模型绑定（用于显示）以及缓存数据。

我会想象一个好的解决方案会在后台做一些周到的工作。例如，如果表最初显示N个项目，它可能会获取2N个项目，为用户返回数据，然后在后台获取下一个2N项目（即使用户没有请求此项目）。随着用户进行搜索/排序更改，它会抛出（甚至可能缓存初始基本情况），并执行类似的功能。

你能分享你见过的最好的解决方案吗？

谢谢

Answer 1

这取决于如何使用数据。

对于浏览器的Find函数足够大的大型数据集，只需返回一个直接的HTML表格就很有效。加载需要一段时间，但显示器对较慢的较慢客户端有响应，并且您不必担心会中断。

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

我从来没有尝试过明显的预取&背景技巧，因为这些其他方法运行良好。

Answer 2

使用一个jQuery表插件像数据表：http://datatables.net/

它支持的服务器端处理排序，过滤，和寻呼。它包括流水线支持预取的记录下一个x页：http://www.datatables.net/examples/server_side/pipeline.html

其实数据表插件适用于四种不同的方法： 1. HTML表，所以你可以发下来一串HTML的，然后让所有的排序，筛选和分页工作客户端。 2.使用JavaScript数组，您可以发送2D数组，让它从那里创建表格。 3. Ajax源代码 - 这不适用于你。 4.服务器端，您将JSON格式的数据发送到空表，并让DataTables从那里接收数据。

Answer 3

既然你用Ext JS标记了这个，如果你还没有看到它，我会指给你Ext.ux.LiveGrid。源代码可用，所以你可以看一看他们是如何解决这个问题的。这是Ext JS世界中广受欢迎和广泛使用的扩展。有了这个说法，我个人认为（虚拟）加载那么多的数据作为用户体验是没有用的。手动拉动滚动条（每个像素跳过数百条记录）是一种远低于单纯输入所需内容的体验。我更喜欢一些强大的过滤/搜索，而不是向用户展示那么多的数据。

如果你去谷歌和，而不是一个搜索框，它只是加载整个互联网进入，你必须滚动来找到你的网站一个长期的虚拟列表... :)

Answer 4

SlickGrid不正是你在找什么。 （Demo）

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

Answer 5

检出this comprehensive list数据网格和 电子表格。

对于过滤/排序/分页目的，您可能会对Handsontable或DataTables感兴趣。

如果您只需要显示巨大的列表而没有任何附加功能Clusterize.js应该足够了。