angular - 是否可以访问各个 ag-grid 列标题来实现 : on-mouseover ="method_name()" on them?

Question

我在元素中使用 ag-grid 来实现在一个综合动态 Web 应用程序中的不同 Excell 文件中构建的工具。
我现在尝试实现的Excel功能是这样的:
当我将鼠标悬停在列标题上方时，会显示一条描述列使用情况的通知，如您在以下链接中看到的那样:

我在 ag-grid 文档中搜索了一种访问各个 ag-grid 列标题 html 元素的方法，以便我可以将每个元素绑定(bind)到监听器。
但是，我找不到解决方案。
这是组件 html 文件。如您所见，这是非常基本的。我添加了鼠标悬停监听器，只是为了测试它。

<ag-grid-angular
style="width: 3000px ; height: 1000px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
pagination
(cellValueChanged)="onCellValueChanged($event)"
(gridReady)="onGridReady($event)"
on-mouseover="over()"
>  

这是相关的 typescript 代码:

columnDefs = [
    {
      headerName: 'Rattachement',
      field: 'rattachement',
      editable: true,
      cellEditor: 'agSelectCellEditor',
      cellEditorParams: {
        values: ['Audit', 'RA', 'Consulting', 'FA', 'Tax&Legal', 'ICS', 'Taj'],
      },

显然，网格上方的任何“鼠标移动”都会执行 over() 方法。 我想要的是: 当鼠标悬停在某个列标题上方时，我会根据列标题 ID 执行 over() 方法。 我希望我说得清楚。
欢迎任何帮助。

Answer 1

我认为你走错了方向。无需处理 mousemove、mouseover 等事件。

你实际上应该使用headerTooltip为此，使用 ColDef 属性。

所以，你的 ColDef 会是这样的

{
  headerName: 'Rattachement',
  headerTooltip: 'whatever you like to show',  // <=
  field: 'rattachement',
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: ['Audit', 'RA', 'Consulting', 'FA', 'Tax&Legal', 'ICS', 'Taj']
  }
}