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

Posted 2023-03-28

【中文标题】Ag Grid 自定义（选定）行样式

【英文标题】：AgGrid Customized (Selected) Row Styling

【发布时间】：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

【讨论】：

谢谢 NearHuscarl 将在我的应用程序中尝试这个。