是否可以访问单个ag-grid列标题来实现：on-mouseover =“method_name（）”？

Question

我在我的项目中使用ag-grid来实现在一个综合的动态Web应用程序中构建在不同Excell文件中的工具。 我现在尝试实现的Excel功能是： 当我将鼠标悬停在列标题上方时，会出现一个通知显示，用于描述列的使用，如下面的链接所示：

我在ag-grid文档中搜索了一种访问单个ag-grid列标题html元素的方法，以便我可以将每个元素绑定到监听器。 但是，我找不到解决方案。 这是组件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()"
>  

这是相关的打字稿代码：

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

显然，网格上方的任何“鼠标移动”都会执行over（）方法。我想要的是：当鼠标悬停在CERTAIN列标题上方时，我会根据列标题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']
  }
}