如何在 ag-grid 中的一行顶部叠加控件？

Question

我需要在包含符合特定条件的数据的行的顶部添加特定控件。这些标准缺少需要使用内联编辑功能添加的必需信息。我们想要的是一个导航控件，它位于第一个匹配行的顶部，并通过单击“下一步”将您带到下一个，这将使网格向上滚动到下一个匹配行，该行将在顶部显示另一个控件及以上允许导航到下一个匹配行或转到上一行。

假设我们有一个汽车列表，并且我们希望用户浏览价格低于或等于 45k 的汽车行，您将看到如下内容：

在下一次单击时，您将看到如下内容：

我相信为了拥有此功能，我需要对行进行引用，并在单击时相对于每一行在 DOM 中注入一个组件。但我不知道该怎么做。我尝试将组件动态添加到第一个匹配行的本机元素，如下所示：

  onGridReady(params) {
    this.api = params.api;
    this.columnApi = params.columnApi;

    params.api.forEachNode((node, index) => {
      if(node.data.price <= 45000) {
        this.matchingIndexes.push(index);
      }
    });

    let firstRowRef = this.gridElementRef.nativeElement.querySelectorAll(`[row-index="${this.matchingIndexes[0]}"]`)[1];
    
    const factory = this.factoryResolver.resolveComponentFactory(PagingOverlayComponent)
    const component = factory.create(firstRowRef.parentInjector)
    this.viewContainerRef.insert(component.hostView);
  }

我希望能够以某种方式相对于它必须附加的行插入组件，以便我可以将它放置在它上面。这是我能走的最远的地方：

关于如何实现这一目标的任何想法？

请在这里找到一个有效的stackblitz

Answer 1

我们为银行中的一个应用程序做了一些与此非常相似的事情，但我们使用的是 AdapTable，它是一个位于 ag-Grid 之上的组件。

它有一个搜索功能，其中包括一个仅返回所有结果集的选项。它还具有跳转到单元格并突出显示单元格的 api 方法。因此，我们创建了与此非常相似的内容，每次您单击箭头时，我们都会让 AdapTable 突出显示并跳转到 ag-Grid 中的相关单元格。

实现起来很容易——最多几个小时——但正如我所说，我们直接使用 AdapTable 而不是 ag-Grid，我不知道在内部做什么来将搜索结果集返回给我们。

Answer 2

您不需要使用本机元素来实现此目的。

尝试以下组合：

1. 用于分页控件的 AgGrid 单元格渲染器，以及
2. 用于管理分页/搜索逻辑的共享服务。它将需要回答问题（来自每个单元渲染器实例），例如“此行索引是否匹配？”、“我匹配哪个数字？” 以及“总共有多少场比赛？”

我分叉了你的 stackblitz来帮助你开始。分页器位于该make列中 - 匹配项显示分页器，不匹配项显示品牌。您仍然需要实现逻辑来：

• 根据选择的行隐藏分页器。
• 滚动到下一个/上一个