Header 使用服务器端数据源时复选框选择不起作用
Header checkbox selection doesn't work when using Server Side Data source
如标题所示,我将 ag-grid 与 Angular 一起使用,并且我使用实现 IServerSideDatasource 的自定义 class 以使用 rowModelType 从 API 获取数据设置为 'serverSide'。
问题是,当我将 headerCheckboxSelection 和 checkboxSelection 设置为 true 时,复选框 select 出现在每一行旁边,但它没有出现在 Header 中,而当我使用客户端行模型类型。
有人可以帮忙吗?
Header 复选框选择不是 ag-grid 的服务器端行模型支持的功能。您应该会收到一条控制台日志消息,通知您这一点。
请参阅documentation了解更多信息。
Feature Client-side Infinite Server-side Viewport
...
Row Selection ✔ ✔ ✔ ✔
Header Checkbox Selection ✔ ✕ ✕ ✕
如果您想实现此功能,您将需要使用自定义 header 组件手动处理此功能。我以前做过(尽管使用的是 Infinite Row-Model,而不是 Server-side),但是您需要跟踪一些事情...
- 当前检查的总行列表。
- 是否选择了'check all'?
- 是否显示不确定的复选框(选择了一些,但不是所有行)。
- 从服务器获取行时,您需要查看是否已按下检查所有按钮并相应地更新该行的选择。
我使用了一个 Angular 服务来保持一个中心位置来跟踪所有这些信息,并且仅依靠 header-component 来显示复选框。
如您所见,这是一项 non-trivial 任务,没有简单的解决方案。
如标题所示,我将 ag-grid 与 Angular 一起使用,并且我使用实现 IServerSideDatasource 的自定义 class 以使用 rowModelType 从 API 获取数据设置为 'serverSide'。
问题是,当我将 headerCheckboxSelection 和 checkboxSelection 设置为 true 时,复选框 select 出现在每一行旁边,但它没有出现在 Header 中,而当我使用客户端行模型类型。
有人可以帮忙吗?
Header 复选框选择不是 ag-grid 的服务器端行模型支持的功能。您应该会收到一条控制台日志消息,通知您这一点。
请参阅documentation了解更多信息。
Feature Client-side Infinite Server-side Viewport
...
Row Selection ✔ ✔ ✔ ✔
Header Checkbox Selection ✔ ✕ ✕ ✕
如果您想实现此功能,您将需要使用自定义 header 组件手动处理此功能。我以前做过(尽管使用的是 Infinite Row-Model,而不是 Server-side),但是您需要跟踪一些事情...
- 当前检查的总行列表。
- 是否选择了'check all'?
- 是否显示不确定的复选框(选择了一些,但不是所有行)。
- 从服务器获取行时,您需要查看是否已按下检查所有按钮并相应地更新该行的选择。
我使用了一个 Angular 服务来保持一个中心位置来跟踪所有这些信息,并且仅依靠 header-component 来显示复选框。
如您所见,这是一项 non-trivial 任务,没有简单的解决方案。