更改每隔一行的背景颜色答案

【问题标题】：Change background color of every other row更改每隔一行的背景颜色
【发布时间】：2020-10-01 10:31:20
【问题描述】：

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

这是我目前不起作用的方法

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

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

有没有办法访问和更改这些默认颜色？

【问题讨论】：

标签： javascript css ag-grid

【解决方案1】：

我发现ag-grid 的默认主题已经做了我想要的，问题是我使用的主题有两种非常相似的颜色，我真正需要的是更改默认颜色。

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

.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，在那里我发现了我应该编辑哪个变量。

【讨论】：

【解决方案2】：

检查您在此处显示的工作示例，每个.ag-row div 都有一个附加类.ag-row-odd 或.ag-row-even。所以基本上这些类模仿你可以通过使用.ag-row:nth-child(odd) 和.ag-row:nth-child(even) 实现的行为。

在这种情况下可能发生的情况是，当您对 .ag-row 元素重新排序时，类并没有被更新，而是只是四处移动。那代表的是这样的：

<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>

<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>

所以在这种情况下，我建议将样式更改为：

.ag-row:nth-child(odd) {
    background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
    background-color: #ffffff;
}

如果这不是一个选项，那么您应该查看重新排序 .ag-row 元素的脚本，因为它可能没有相应地更改类。

更新

我想我找到了你的问题。我查了this example

在检查元素时，我发现当你重新排序时，每一行都有这两个属性。

<div row-index="3" aria-rowindex="7"></div>

据我所知，即使您更改了排序参数，这两个属性实际上也不会改变。因此，如果您将行样式基于它们，就像使用 row-index 参数一样，您将永远无法获得正确的顺序，因为有时您会得到：

<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>

由于这没有错，样式被应用，但不是按照您喜欢的顺序。该脚本正在按预期工作，只是您的颜色条件不起作用。

我认为解决这个问题的方法是 100% css 并且你可以删除 cellStyle 定义，因为我认为问题就在那里。

【讨论】：

这适用于第一次渲染，但在重新排序后不起作用，我想我需要在某处检查重新排序脚本 =(
您好@BernardoMarques，如果您提供一个在线工作示例，我可以通过检查您的脚本的功能来提供更多帮助。
你好@BernardoMarques 我用更多信息更新了我的答案。
是的，我认为最简单的方法是将他们的主题装扮起来。我在他们的 README 中找到了这个github.com/ag-grid/ag-grid-customise-theme，它说当你改变一些东西时，你可以看到它反映在你的 styles.scss 但我是 scss 的新手，我看不到任何变化
通常对于 scss 应该有一个编译 de SCSS 文件以生成 CSS 文件的过程，因此您可能需要设置编译过程。除此之外，您应该检查已定义的 ag-grid 样式。

【解决方案3】：

CSS 将是解决此问题的最简单方法。我没有看到你的 html，但基本上你会想要引用 html 表的行，然后向它们添加 css nth-child(even) 和 nth-child(odd)。这是一个例子：

p:nth-child(odd)
{
    background: #ccc;
}
p:nth-child(even)
{
    background: #fff;
}

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

here 是 w3 的更多示例：

根据您的特定代码的外观，可能会有不同的方法来执行此操作。我注意到您的问题中有 js，但是由于有 css 标签，所以我给出了 css 答案。

【讨论】：