如何在 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) {

    //do your stuff here
  }

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

Answer 2

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

• 最初通过样式隐藏单元格的内容（display:none 表示该单元格）
• 在行悬停时，ag-grid 添加ag-row-hover CSS 类，使用该类选择器显示单元格的内容。

示例代码sn-p：

假设您的图像类是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 (My Custom Renderer) 中定义这些样式

Working plunker