Ag Grid 自定义（选定）行样式答案

【问题标题】：AgGrid Customized (Selected) Row StylingAg Grid 自定义（选定）行样式
【发布时间】：2021-07-22 20:16:49
【问题描述】：

我正在尝试将自定义样式添加到我的 AgGrid 中的每一行。我在 onGridReady 中使用了以下 sn-p 代码：

gridOptions.getRowStyle = function (params) {
  if (params.node.rowIndex % 2 === 0) {
    return { background: "#f0f1f4" };
};

我遇到的问题是我想添加一个变体来指示是否选择了该行。目前，无论哪种方式，风格都保持不变。我应该在我的代码中添加什么来实现这一点？

提前感谢您的阅读和回复。

【问题讨论】：

【解决方案1】：

AgGrid 公开每个行元素的多个类名来描述其当前状态（ag-row、ag-row-odd、ag-row-selected...）。如果当前选择的行样式如下所示，您可以利用该信息覆盖行样式：

.ag-theme-alpine .ag-row.ag-row-odd {
  background-color: pink;
}
.ag-theme-alpine .ag-row.ag-row-odd.ag-row-selected {
  background-color: red;
}

Live Demo

【讨论】：