每隔一行更改背景颜色

Question

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

这是我目前的方法，但行不通

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

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

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

Answer 1

CSS 将是最简单的解决方案。我没有看到你的 html，但基本上你会想要引用 html table 的行，然后添加 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 答案。

Answer 2

检查您在此处显示的工作示例，每个 .ag-row div 都有一个额外的 class .ag-row-odd 或 .ag-row-even。所以基本上那些 classes 模仿你可以通过使用 .ag-row:nth-child(odd) 和 .ag-row:nth-child(even).

实现的行为

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

<!-- 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 元素的脚本，因为它可能不会相应地更改 classes。

更新

我想我发现了你的问题。我检查了 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 定义，因为我认为问题出在那里。

Answer 3

我发现 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/, that took me to https://github.com/ag-grid/ag-grid-customise-theme，在那里我发现了我应该编辑哪个变量。

每隔一行更改背景颜色

Change background color of every other row

javascript

css

ag-grid