如何在 ag-grid 中的一行顶部覆盖控件？答案

【问题标题】：How to overlay control on top of a row in ag-grid?如何在 ag-grid 中的一行顶部覆盖控件？
【发布时间】：2021-05-26 02:29:49
【问题描述】：

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

假设我们有一个汽车列表，我们希望用户浏览价格低于或等于 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);
  }

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

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

Please find a working stackblitz here

【问题讨论】：

您需要将元素附加到文档正文 - 这应该可以正常工作。另一种解决方案是利用自定义单元格渲染器组件在单元格内创建控件，这更容易实现：ag-grid.com/documentation/angular/component-cell-renderer

标签： angular ag-grid

【解决方案1】：

你应该不需要使用原生元素来实现这一点。

尝试以下组合：

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

我 forked your stackblitz 让你开始。分页器位于make 列中 - 匹配显示分页器，不匹配显示品牌。您仍然需要实现以下逻辑：

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

【讨论】：

感谢您的工作。正如您所说，我真正想要的是“合并”到现有列。最终的外观应该类似于我的问题的屏幕截图，也就是说，在匹配行的顶部显示为一个覆盖控件，在“下一个”单击时将消失以显示在下一个匹配行的顶部。 AgGrid 单元渲染器听起来很有希望，但仍需要解决这个问题（现在正在处理其他事情）
不用担心。将单元格渲染器移动到要与其组合的列，然后根据是否选择行（api.getSelectedNodes()）显示/隐藏分页。添加用于选择下一个/上一个匹配的 RowNode 的按钮（使用RowNode.setSelected(true)）并大概滚动到所选的一个（使用api.ensureIndexVisible），你就在那里了。

【解决方案2】：

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

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

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

【讨论】：