启用冻结列时如何突出显示角度光滑网格中的整行

Question

要求

我想在将鼠标悬停在具有冻结列的 Angular SlickGrid 行上时突出显示整行。但是，通常的 CSS :hover 选择器不起作用，因为网格分为 Frozen Column 和 Non-Frozen Column slick-panes。我正在寻找另一种方法来在这种情况下实现行突出显示。

我最近发现了 ghiscode 并尝试使用提供的代码片段突出显示整行。虽然这成功地满足了我的行突出显示要求，但它使复选框无法选择。是否有另一种方法可以在悬停时在 SlickGrid 中实现行突出显示，并且不会干扰复选框功能？

下面附有屏幕截图的输出

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

  /** Change the Duration Rows Background Color */
  changeDurationBackgroundColor() {
    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver40(this.dataView.getItemMetadata);

    // also re-render the grid for the styling to be applied right away
    this.grid.invalidate();
    this.grid.render();
  }

updateItemMetadataForDurationOver40(previousItemMetadata: any) {
    const newCssClass = 'duration-bg';

    return (rowNumber: number) => {
      const item = this.dataView.getItem(rowNumber);
      let meta = {
        cssClasses: ''
      };
      if (typeof previousItemMetadata === 'object') {
        meta = previousItemMetadata(rowNumber);
      }

      if (meta && item && item.duration) {
        const duration = +item.duration; // convert to number
        if (duration > 40) {
          meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
        }
      }

      return meta;
    };
  }

Answer 1

不太清楚您的问题是什么，因为突出显示通常意味着两件事（1.短时间内用背景颜色闪烁单元格或2.添加永久背景颜色）。然而，当您将鼠标悬停在行上时，您似乎正在寻找背景颜色，这就是您正在寻找的吗？如果是，那么这已经在 Angular-Slickgrid 示例 20 中进行了演示，当您发现冻结部分意味着不同的 div 时，您需要从网格对象中观看

onMouseOver

和 onMouseLeave` ，该对象再次直接从网格对象中拉出示例20

angularGridReady(angularGrid: AngularGridInstance) {
  this.angularGrid = angularGrid;
  this.gridObj = angularGrid.slickGrid;

  // with frozen (pinned) grid, in order to see the entire row being highlighted when hovering
  // we need to do some extra tricks (that is because frozen grids use 2 separate div containers)
  // the trick is to use row selection to highlight when hovering current row and remove selection once we're not
  this.slickEventHandler.subscribe(this.gridObj.onMouseEnter, (event: Event) => this.highlightRow(event, true));
  this.slickEventHandler.subscribe(this.gridObj.onMouseLeave, (event: Event) => this.highlightRow(event, false));
}

highlightRow(event: Event, isMouseEnter: boolean) {
  const cell = this.gridObj.getCellFromEvent(event);
  const rows = isMouseEnter ? [cell?.row ?? 0] : [];
  this.gridObj.setSelectedRows(rows); // highlight current row
  event.preventDefault();
}