无限网格滚动和局部过滤

Posted

技术标签:

【中文标题】无限网格滚动和局部过滤【英文标题】:Infinite Grid Scrolling and Local Filtering 【发布时间】:2013-11-26 06:11:40 【问题描述】:

我一直在查看解决同一问题的多个帖子。在从存储中远程过滤数据并将其输入网格面板之前,是否有任何解决方案:

在网格面板视图中一次性显示大约 10000 条记录。 在网格中使用列过滤来过滤所有这些记录。

【问题讨论】:

【参考方案1】:

这两种方法是相互交叉的——在查看这种大小的数据集时,您需要考虑使用缓冲网格/存储。缓冲网格的全部意义在于底层数据集太大而无法同时加载到网格中而不会引入大量开销(通常在 DOM 复杂性方面,其次是 JS 处理)。因此,就其本质而言,数据被缓冲并以块的形式加载。因此,在此之上引入本地过滤/排序作为一层是不合适的,因为它将仅应用于当前块,因此当获取下一个记录块时,它们不会订阅由指示的过滤器/排序用户期望的 GUI/。因此,您最终会得到一个脱节的用户体验。

因此,您有几种方法:

    使用分页网格 - 在每个页面上进行本地过滤/排序,仍然产生不太理想的用户体验,但至少在某些方面它是半逻辑的

    不使用分页/缓冲,只需加载所有记录,然后进行本地过滤/排序,这实际上不是一个可扩展的解决方案,而是更多地试图逃避为您的应用打下坚实基础的工作

    根据您的要求,使用缓冲网格/存储并实施服务器端过滤/排序,这显然是建议 - 实施起来应该不会太难

所以简短的回答是否定的——建议使用带有远程过滤/排序的缓冲网格/存储。

【讨论】:

2 目前已实现,但在性能方面是一个巨大的瓶颈;而 1 对于当前处理数据的情况是没有问题的。 3 似乎是唯一的方法。感谢您更清楚地了解此问题。

以上是关于无限网格滚动和局部过滤的主要内容,如果未能解决你的问题,请参考以下文章

EXTJS 5.0:无限网格滚动不适用于商店中的 extraParams

Flutter GridView 页脚(用于指示无限滚动的负载)

无限滚动IOS在gridview中一次垂直和水平滚动

画布无限滚动映射对象位置

Mongoose:带过滤的无限滚动

如何从数组中过滤数据并使用角度js应用无限滚动?