如何将点击事件添加到 ag-grid 中的列标题？答案

【问题标题】：How to add click event to column header in ag-grid?如何将点击事件添加到 ag-grid 中的列标题？
【发布时间】：2021-08-03 20:22:56
【问题描述】：

单击列标题时，我需要选择整个列。我找不到任何解决方案，因为 ag-grid 中的列没有“点击”事件。我能找到的唯一事件是 'sort' 或 'pin' 列。 我还希望在点击时获得列数据，以便我可以根据选择的列执行其他任务。 附上屏幕截图以便更好地理解。

【问题讨论】：

您可以使用 document.querySelector 选择列单元格，然后在 ngAfterViewInit() 方法上，为点击添加一个 eventListener。但是在不知道您的表是否为该表生成唯一标识符的情况下，我无法提供任何其他想法。文档上有这个属性 col-id... 你能搜索到吗？
嘿@RafaeldeCastro，感谢您的建议。我按照您建议的方式尝试了它。我能够在单击列标题单元格时提取 col-id。之后，我能够根据 col-id 过滤和更新行数据样式。将为此写一个详细的答案并关闭。

标签： angular ag-grid ag-grid-angular ag-grid-react

【解决方案1】：

通过从所有类名为 'ag-header-cell' 的 div 中提取 col-id 属性来解决此问题。

this.colElements = Array.from(
  document.getElementsByClassName('ag-header-cell') as HTMLCollectionOf<
    HTMLElement
  >
);

然后在找到的每个项目上添加点击事件侦听器。当我们单击列标题时，这将为我们获取 col-id 属性。

this.colElements.forEach((elem, index) => {
  elem.addEventListener('click', () => {
    attribute = elem.getAttribute('col-id');
    //you can add you custom styling based on selected index here
  });
});

接下来，在 'columnDefs' 数组中，我们通过根据提取的 col-id 过滤单元格项目来添加自定义 'cellStyle'。

columnDefs: [
      {
        headerName: 'State',
        field: 'dynamic',
        cellStyle: (params) => {
          if (params.colDef.field === this.selectedColId) {
            return { color: '#001D6D', backgroundColor: '#F3F7FF' };
          }
          return null;
        },
      },
    ],

最后在事件监听的每一个点击事件上，我们添加'redrawRow'函数。

columnSelected(colId) {
  this.gridOptions.api.redrawRows();
}

【讨论】：