如何捕获ag-grid中的行悬停事件？

Question

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

请参阅 plunkr 示例：https://plnkr.co/edit/NfuGp3iVheuCqglz

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;
      });
  }
}

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

import { Component, OnInit } from '@angular/core';
    
@Component({
  selector: 'app-kaboob-menu',
  template: `<img border="0" width="15" height="10" src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley.png"/>`,  
})

export class KaboobMenuComponent implements OnInit {
  params: any;
  rowData: any;
  display = true;
    
  constructor() { }
    
  agInit(params) {
    this.params = params;
    this.rowData = params.data;    
  }
   
  ngOnInit() {
  }
    
  onClick($event) {
    if (this.params.onClick instanceof Function) {
      const params = {
        event: $event,
        rowData: this.params.node.data
      };
      this.params.onClick(params);
    }
  }
}

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

任何方向将不胜感激。提前致谢！

Answer 1

我会监听cellMouseOver网格发出的事件。

在你的html中：(cellMouseOver)="onCellMouseOver($event)"

在您的组件中：

onCellMouseOver(params) {
  console.log(params.rowIndex); // 0
}

params 对象有一个rowIndex来标识它位于哪一行，而不管单元格是什么。您可以在其中操作您的 rowNodeonCellMouseOver