启用冻结列时如何高亮Angular SlickGrid整行

在启用冻结列的Angular SlickGrid中，常规CSS :hover 选择器因网格被分割为冻结/非冻结 pane（slick-panes）无法实现整行高亮。此前通过getItemMetadata添加样式的方式虽实现了高亮，但导致复选框无法选中，以下是不干扰复选框功能的解决方案：

实现思路 #

通过监听SlickGrid的鼠标进入/离开事件跟踪当前悬停行号，再通过getItemMetadata动态为悬停行添加高亮CSS类，同时保留原有元数据中的所有CSS类（包括复选框所需的选择类），避免覆盖原有功能。

具体步骤 #

1. 组件内定义变量与事件绑定

在组件类中添加悬停行跟踪变量，并在angularGridReady中绑定鼠标事件：

import { AngularGridInstance } from 'angular-slickgrid';
import { Slick } from 'slickgrid';

export class YourComponent {
  angularGrid!: AngularGridInstance;
  dataView!: any;
  grid!: Slick.Grid;
  gridService!: any;
  private hoveredRow = -1; // 跟踪当前悬停的行号

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataView = angularGrid.dataView;
    this.grid = angularGrid.slickGrid as Slick.Grid;
    this.gridService = angularGrid.gridService;

    // 绑定鼠标进入事件
    this.grid.onMouseEnter.subscribe((e: Event, args: Slick.OnMouseEnterEventArgs) => {
      if (args.row !== this.hoveredRow) {
        // 清除之前的悬停行样式
        if (this.hoveredRow !== -1) {
          this.grid.invalidateRow(this.hoveredRow);
        }
        this.hoveredRow = args.row;
        this.grid.invalidateRow(args.row);
        this.grid.render();
      }
    });

    // 绑定鼠标离开事件
    this.grid.onMouseLeave.subscribe(() => {
      if (this.hoveredRow !== -1) {
        this.grid.invalidateRow(this.hoveredRow);
        this.hoveredRow = -1;
        this.grid.render();
      }
    });

    // 初始化行元数据处理逻辑
    this.initRowMetadata();
  }

2. 合并行元数据逻辑

将悬停高亮与原有样式逻辑（比如你之前的duration背景色）合并，确保所有CSS类都被保留：

private initRowMetadata() {
    const originalMetadata = this.dataView.getItemMetadata;
    
    this.dataView.getItemMetadata = (rowNumber: number) => {
      // 保留原有元数据，避免覆盖复选框等默认样式类
      let meta = originalMetadata ? originalMetadata(rowNumber) : { cssClasses: '' };
      
      // 处理悬停高亮
      if (rowNumber === this.hoveredRow) {
        meta.cssClasses = (meta.cssClasses || '') + ' hover-highlight';
      }

      // 保留你原有的duration背景色逻辑
      const item = this.dataView.getItem(rowNumber);
      if (item && item.duration) {
        const duration = +item.duration;
        if (duration > 40) {
          meta.cssClasses = (meta.cssClasses || '') + ' duration-bg';
        }
      }

      return meta;
    };
  }
}

3. 添加CSS样式

在组件样式文件中定义高亮类，确保冻结和非冻结区域都生效：

/* 整行悬停高亮样式 */
.slick-pane .hover-highlight {
  background-color: #f0f7ff !important; /* 可自定义颜色 */
}

/* 你原有的duration背景色样式 */
.duration-bg {
  background-color: #ffebee !important;
}

关键说明 #

• 必须保留原有getItemMetadata返回的cssClasses，否则会覆盖复选框选择时的默认类（比如slick-row-selected），导致复选框功能失效。
• 使用invalidateRow和render方法局部刷新行，避免全网格重绘影响性能。

内容的提问来源于stack exchange，提问作者Sanjeev Neelakantan