Question

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

我注意到现在已经覆盖了“选定的行”颜色，所以当选择一行时，背景不会改变以表示这样。
什么是仍然让突出显示的行颜色工作的正确方法使用自定义getRowStyle。

这是rowStyle函数的打字稿：

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

Answer 1

在CSS中，您可以选择不定位选定行。

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

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

您可以简单地使用CSS仅将未选择的行作为目标，甚至可以对选择并具有自定义类的行应用不同的样式。

这里是一个例子：

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，它在单击按钮时会覆盖行样式，但这不涉及样式回调：

这是您要寻找的吗？

Answer 2

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

具有所选行的Ag-grid RowStyle

2 个答案: