带有选定行的 Ag-grid RowStyle答案

【问题标题】：Ag-grid RowStyle with selected row带有选定行的 Ag-grid RowStyle
【发布时间】：2017-02-18 11:18:36
【问题描述】：

我正在使用 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 highlighted row color work with自定义 getRowStyle。

以下是 rowStyle 函数的打字稿：

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

【问题讨论】：

标签： ag-grid

【解决方案1】：

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

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

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

您可以简单地使用 CSS 仅定位未选择的行，甚至可以将不同的样式应用于已选择且具有您的自定义类的行。

这是一个例子：

CSS

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

或选择不同的样式和背景红色

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

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

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

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

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

这是你要找的吗？

【讨论】：

【解决方案2】：

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

【讨论】：