javascript - 社区版中的 ag-grid 客户端行模型 - 不像官方文档那样表现

Question

在 Angular 7 中使用 ag-grid-community 22.1.1 版本

如果我们使用官方文档，那么客户端模型应该只加载可用的记录或以分页大小设置。但这不会发生。当浏览器发出请求时，它会等到所有记录都加载完毕并在视图开始呈现之前返回响应。

有人可以从以下措辞中解释我的理解是错误的吗

这里有更详细的经验法则。

如果您不确定，请使用默认客户端。网格可以处理大量数据（100k+ 行）。即使您从服务器返回了数千行，网格也只会呈现屏幕上可见的内容（大约 40 行，具体取决于您的屏幕大小）。您不会用太多数据杀死网格 - 而是在网格出现问题之前您的浏览器会耗尽内存。因此，如果您不确定，请先使用客户端行模型，仅在需要时进行更改。使用客户端，您可以通过网格为您完成排序、过滤、分组、透视和聚合。除非另有说明，否则文档中的所有示例都使用客户端模型。

链接到官方文档，解释不同的行模型以及何时使用什么。

基于此，如果我期望我的 api 将返回 500 条记录并且我的[paginationPageSize]="40" 不应该加载 40 条记录并呈现，尽管在后台它仍然可以将所有其他剩余记录加载到浏览器缓存中。但看起来它正在等待整个记录集加载到浏览器缓存，然后开始渲染，这会影响性能。

以下是最令人困惑的行

网格只会渲染屏幕上可见的内容（大约 40 行，取决于您的屏幕尺寸）

标签： javascriptangularag-gridag-grid-angular

Answer 1

ag-grid就此而言，客户端模型中的任何网格都将首先获取所有记录，然后开始在浏览器中呈现。但是，它只会呈现适合可见视图的行数。这是有充分理由的。

考虑一个场景，您的应用程序的用户正在搜索/过滤网格中的某个字段，如果网格当时没有所有数据（它仍在后台从服务器获取），它甚至可能返回Not Found尽管匹配的记录存在于尚未到来的数据中。排序、分组等操作也会出现同样的问题 。

ag-grid doc上的这个链接清楚地说明了

默认情况下，网格希望您预先提供所有数据。换句话说，您的应用程序将完整的数据集加载到客户端，然后将其全部传递给网格。这与服务器端数据形成对比，服务器端数据主要保存在服务器上并部分加载到网格中。

现在，它在视图中呈现 40 条左右记录的原因是，为所有行创建和呈现 HTML 会使页面变得非常缓慢或无法使用。

如果您希望从服务器获取数据块，则需要选择服务器端模型。但随后它涉及更多的工作来实现过滤、排序等。