Question

我想创建一个表来网格化一些数据。该表可以列出大量数据（100K +行）。所以我想要做的是一次显示20行，可能有100行缓冲区。当用户向下滚动网格时，它会通过ajax加载到额外的行中？我已经看到了这个，但我真的不知道如何实现这一目标？

Answer 1

我发现SlickGrid是一个很棒的jQuery插件，可以通过使用自适应虚拟滚动处理这种类型的海量数据集，就像你描述的那样。它也很漂亮，还有许多其他高级功能。

Answer 2

这与你描述的完全一样。

想象一下jQuery appending <tr>到<table>。就这么简单。

服务器端
脚本调用具有SQL限制的行

// where ? represents entry_num that will be passed by jQuery
SELECT *
FROM table_x
LIMIT ?, 20

客户端
jQuery将新项目放入表中。

// server side will in check for entry number to give back the proper rows
$.ajax({
  url: "/getRows",
  data: "entry_num="+num,
  cache: false,
  success: function(html){
    $("#table").append(html);
  }
});

Answer 3

查看jQGrid：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features

它支持“懒惰”分页，但我确信可以修改它以完成整个滚动操作。

Answer 4

虚拟卷轴的UX（用户体验）缺点是您没有向用户提供有关滚动区域总高度的视觉反馈。

另外，用户快速移动到数据集中的相对点可能很棘手/不可能。 - 例如，列表按字母顺序排序，用户想要跳转到列表的中间或末尾。 - 在虚拟滚动条中可能很难做到。

对大型数据集的分页视图的替代方案适用于这两个问题。查看YUI Data table widget和community。

如何创建虚拟卷轴？

4 个答案: