具有选定行的 Ag-grid RowStyle

Question

我正在使用 ag-grid 5.1.2 我已经配置了一个 getRowStyle 函数来设置某些项目的背景颜色。

I've noticed that has overridden the 'selected row' color now, so when a row is selected the background will not change to indicate as such.
What is the correct way to still let突出显示的行颜色与自定义 getRowStyle 一起使用。

这是 rowStyle 函数的打字稿：

 self.customRowStyle = function (params: AgParams) {
    if (!params.data.isShaded) {
        return {
            'background-color': '#CEDDDD'
        };
    }
    return null;
}

Answer 1

使用 getRowClass gridOption 而不是 getRowStyle。然后在 CSS 中为您的背景行和突出显示的背景行设置适当的样式。

Answer 2

在您的 css 中，您可以选择不定位所选行。

ag-Grid 将 class 添加到从 getRowStyle 回调返回的行中

它还为选中的行添加 .ag-row-selected。

您可以简单地使用 CSS 仅定位未选定的行，甚至可以将不同的样式应用到既已选定又具有您的自定义 class.

的行

这是一个例子：

CSS

.bg-red.ag-row:not(.ag-row-selected) {
  background-color: red ;
}

或所选和 bg-red 的不同样式

.bg-red.ag-row {
  background-color: red;
}

.bg-red.ag-row.ag-row-selected {
  background-color: pink;
}

JS

  rowClassRules: {
    'bg-red': () => {
      return true; // applies class bg-red to all rows
    },
  },

这是一个 live running code example 的实际操作。

这里还有另一个实时 example，它会在单击按钮时覆盖行样式，但这不涉及样式回调：

这是您要找的吗？

具有选定行的 Ag-grid RowStyle

Ag-grid RowStyle with selected row

ag-grid