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

Posted 2023-03-28

【中文标题】如何在 ag-grid 中捕获行悬停事件？

【英文标题】：How to capture the row hover event in ag-grid?

【发布时间】：2020-09-08 12:18:26

【问题描述】：

我正在浏览 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"   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 事件。但是，当我们将鼠标悬停在第一列而不是任何其他列时会触发此事件。我想捕获行悬停事件。 任何方向将不胜感激。提前致谢！！

【参考方案1】：

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

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

在组件中：

  onCellMouseOver(params) 

    //do your stuff here
  

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

【讨论】：

我应该更具体。我目前正在做 cellMouseOver，但它适用于将鼠标悬停在单元格上。我想捕获该行上的悬停以操纵是显示还是隐藏该行中的第一列。我会编辑帖子

onCellMouseOver 对所有单元格触发，而不仅仅是第一个单元格。 params 对象可以访问 rowIndex 以及可以帮助您为要隐藏的列清空数据的节点

是的，我可以从 params 获取 rowNode 数据。但是，如何在第一列中显示/隐藏图像？我应该查看哪个属性？能不能说的具体点？

一旦你知道鼠标在哪一行，你基本上可以在 params.data.hoverOn = true 上设置一些值，然后执行 api.refreshCells() 来重新触发你的单元格渲染器？您的单元格渲染器可以根据此 hoverOn 属性显示/隐藏一些逻辑

【参考方案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