Ag grid 如何在ag网格中捕获行悬停事件？

我正在浏览AGGrid的文档，看起来没有任何事件可以捕获网格的行悬停事件。我的要求是当用户将鼠标悬停在行上时，在第一列显示图像。它可能在行的任何列上，不一定在第一个单元格上。我正在使用单元格渲染器和单元格编辑器并执行某些操作。（为了简单起见，我没有在plunker链接中发布单元格编辑器代码）我如何实现这一点

请参见plunkr示例：

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import {KaboobMenuComponent} from './kaboob-menu.component';

@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
       [frameworkComponents]="frameworkComponents"
    ></ag-grid-angular>
  `,
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;
  private rowData: [];
  public frameworkComponents;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: 'Participant',
        children: [
          {
        headerName: '',
        filter: false,
        sortable: false,
        editable: true,
        singleClickEdit: true,
        cellRenderer: 'kaboobRenderer',        
      },
          { field: 'athlete' },
          {
            field: 'age',
            maxWidth: 90,
          },
        ],
      },
      {
        headerName: 'Details',
        children: [
          { field: 'country' },
          {
            field: 'year',
            maxWidth: 90,
          },
          { field: 'date' },
          { field: 'sport' },
        ],
      }     
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 150,
      resizable: true,
    };
    this.frameworkComponents = {
      kaboobRenderer: KaboobMenuComponent
    };
  }

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

    this.http
      .get(
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinners.json'
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

从'@angular/core'导入{Component}；
从'@angular/common/http'导入{HttpClient}；
导入'ag grid community/dist/styles/ag grid.css'；
导入'ag-grid-community/dist/styles/ag-theme-alpine.css'；
从“./kaboob menu.component”导入{KaboobMenuComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类AppComponent{
私有网格API；
私有网格API；
私人专栏；
私人基金；
私有行数据：[]；
公共框架组件；
构造函数（专用http:HttpClient）{
this.columnDefs=[
{
标题名称：“参与者”，
儿童：[
{
头名：''，
筛选器：false，
可排序：false，
是的，
singleClickEdit:true，
cellRenderer:“kaboobRenderer”，
},
{场：'运动员'}，
{
字段：“年龄”，
最大宽度：90，
},
],
},
{
headerName:“详细信息”，
儿童：[
{字段：'国家'}，
{
字段：'年'，
最大宽度：90，
},
{字段：'日期'}，
{字段：'运动'}，
],
}     
];
this.defaultColDef={
弹性：1，
最小宽度：150，
可调整大小：正确，
};
this.frameworkComponents={
kaboobRenderer:KaboobMenu组件
};
}
onGridReady（参数）{
this.gridApi=params.api；
this.gridColumnApi=params.columnApi；
这是http
.得到(
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinners.json'
)
.订阅（数据=>{
this.rowData=数据；
});
}
}

kaboob-menu.component.ts（我的自定义渲染器）

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序kaboob菜单”，
模板：``，
})
导出类KaboobMenuComponent实现OnInit{
参数：任何；
行数据：任何；
显示=真；
构造函数（）{}
agInit（参数）{
this.params=params；
this.rowData=params.data；
}
恩戈尼尼特（）{
}
onClick（$event）{
if（this.params.onClick instanceof函数）{
常量参数={
事件：$event，
rowData:this.params.node.data
};
this.params.onClick（params）；
}
}
}

我用的是cellMouseOver事件。但是，当我们将鼠标悬停在第一列而不是任何其他列上时，会触发此事件。我想捕获行悬停事件。

---

任何指示都将不胜感激。提前谢谢

我会听网格发出的

cellMouseOver

事件

在html中：

（cellMouseOver）=“onCellMouseOver（$event）”

在组件中：

  onCellMouseOver(params) {

    //do your stuff here
  }

---

params对象有一个

行索引

，用于标识它所在的行，而不考虑单元格。您可以在这个

onCellMouseOver

内操纵您的行节点，我将侦听网格发出的

cellMouseOver

事件

在html中：

（cellMouseOver）=“onCellMouseOver（$event）”

在组件中：

  onCellMouseOver(params) {

    //do your stuff here
  }

---

params对象有一个

行索引

，用于标识它所在的行，而不考虑单元格。您可以在此

oncellmouse上操作您的行节点，我也有类似的要求。我使用CSS样式和ag网格类名来显示行悬停单元格的内容


最初通过设置样式隐藏单元格内容（
display:none
用于该单元格）
在行悬停时，ag网格添加
ag行悬停
CSS类，使用此类选择器显示单元格的内容

示例代码段：

让我们假设您的图像类是
my image

因此，您必须按以下方式定义样式：

.my-image {
  display: none;
}
/* ag-grid adds ag-row-hover class on row hover */
.ag-row-hover .my-image {
  display: initial;
}

例如，您应该在
kaboob-menu.component.ts（我的自定义渲染器）

我也有类似的要求。我使用CSS样式和ag网格类名来显示行悬停单元格的内容


最初通过设置样式隐藏单元格内容（
display:none
用于该单元格）
在行悬停时，ag网格添加
ag行悬停
CSS类，使用此类选择器显示单元格的内容

示例代码段：

让我们假设您的图像类是
my image

因此，您必须按以下方式定义样式：

.my-image {
  display: none;
}
/* ag-grid adds ag-row-hover class on row hover */
.ag-row-hover .my-image {
  display: initial;
}

例如，您应该在
kaboob-menu.component.ts（我的自定义渲染器）

我应该说得更具体些。我目前正在做cellMouseOver，但它可以在手机上悬停。我想捕捉行上的悬停，以操纵是否显示或隐藏该行中的第一列。我将编辑所有单元格的postonCellMouseOver，而不仅仅是第一个单元格。params对象可以访问rowIndex和节点，这将帮助您清空要隐藏的列的数据。我可以从params获取rowNode数据。但是，如何在第一列中显示/隐藏图像？我应该调查哪些房产？你能说得更具体一点吗？一旦你知道鼠标在哪一行，你基本上可以在params.data.hoverOn=true上设置一些值，然后执行api.refreshCells（）来重新触发你的单元格渲染器？单元渲染器可以有一些逻辑来显示/隐藏bas