更改每隔一行的背景颜色 [英] Change background color of every other row

问题描述

我正在尝试复制ag-grid的默认设置，该默认设置将每隔一行的背景绘制为稍微不同的颜色.但是，当我尝试对列进行重新排序时，单击headerColumn时，背景色不会重新排序.

I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.

这是我目前无法使用的方法

This is my current approach that isn´t working

cellStyle(params) {
  let backgroundColor = #FFFFFF;
  if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}

https://plnkr.co/edit/bHLEmECLNby3obIT ，此示例显示了所需的行为.

https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.

是否可以访问并更改这些默认颜色?

Is there a way to acces and change those default colors?

推荐答案

我发现ag-grid的默认主题已经满足了我的要求，事实是我正在使用的主题具有两种非常类似，我真正需要的是更改默认颜色.

I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.

我能够通过覆盖主题变量来实现这一目标

I was able to achieve that by overriding theme's variable

.ag-theme-balham {
  --ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
  background-color: var(--ag-odd-row-background-color);
}

我遵循了他们的文档，首先在这里 https://www.ag-grid .com/javascript-grid-styling/，这使我进入了 https://github.com/ag-grid/ag-grid-customise-theme ，在那里我发现了应该编辑的变量.

I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.

这篇关于更改每隔一行的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！