Javascript 每隔一行更改背景色

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

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

cellStyleparams{ 让backgroundColor=FFFFFF； 如果params.node.rowIndex%2==1 backgroundColor=E04F00； } ，此示例显示了所需的行为

---

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

CSS将是最简单的解决方案。我看不到您的html，但实际上您需要引用html表的行，然后向它们添加css第n个Child偶数和第n个Child奇数。以下是一个例子：

p:N奇尔德 { 背景：ccc； } p:第n个孩子 { 背景：fff； } 一,

二,

三,

四,

---

5

CSS将是最简单的解决方案。我看不到您的html，但实际上您需要引用html表的行，然后向它们添加css第n个Child偶数和第n个Child奇数。以下是一个例子：

p:N奇尔德 { 背景：ccc； } p:第n个孩子 { 背景：fff； } 一,

二,

三,

四,

---

5

检查这里显示的工作示例，每个.ag row div都有一个额外的类.ag row奇数或.ag row偶数。因此，这些类基本上模拟了您可以通过使用.ag row:nth childodd和.ag row:nth child偶数实现的行为

在这种情况下可能发生的情况是，当您对.ag行元素重新排序时，类不会被更新，而只是四处移动。它所代表的是这样的东西：

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

.ag行：第n个奇尔德{ 背景色：FCFC； } .ag row:第n个儿童偶数{ 背景色：ffffff； } 如果这不是一个选项，那么您应该检查重新排序.ag行元素的脚本，因为它可能不会相应地更改类

更新

我想我发现了你的问题。我查过了

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

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

由于这不是错误的，因此应用了样式，但不是按照您希望的顺序。脚本正在按预期工作，只是颜色的条件不起作用

---

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

检查您在这里展示的工作示例，每个.ag row div都有一个额外的类.ag row奇数或.ag row偶数。因此，这些类基本上模拟了您可以通过使用.ag row:nth childodd和.ag row:nth child偶数实现的行为

在这种情况下可能发生的情况是，当您对.ag行元素重新排序时，类不会被更新，而只是四处移动。它所代表的是这样的东西：

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

.ag行：第n个奇尔德{ 背景色：FCFC； } .ag row:第n个儿童偶数{ 背景色：ffffff； } 如果这不是一个选项，那么您应该检查重新排序.ag行元素的脚本，因为它可能不会相应地更改类

更新

我想我发现了你的问题。我查过了

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

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

由于这不是错误的，因此应用了样式，但不是按照您希望的顺序。脚本正在按预期工作，只是颜色的条件不起作用

---

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

我发现ag grid的默认主题已经达到了我想要的效果，问题是我使用的主题有两种非常相似的颜色，我真正需要的是改变默认的颜色

我可以通过覆盖theme的变量来实现这一点

.ag主题巴勒姆酒店{ -ag奇数行背景色：E04F00； } .ag theme balham.ag row奇数{ 背景色：var ag奇数行背景色； }

---

我遵循了他们的文档，首先在这里，我找到了应该编辑的变量。

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

我可以通过覆盖theme的变量来实现这一点

.ag主题巴勒姆酒店{ -ag奇数行背景色：E04F00； } .ag theme balham.ag row奇数{ 背景色：var ag奇数行背景色； }

---

我遵循他们的文档，首先是在这里，在那里我发现了应该编辑的变量。

这对第一次渲染有效，但在重新排序后无效，我想我需要检查reorder script某处=Hello@BernardoMarques如果你提供一个在线工作示例，我可能可以通过检查你的脚本的功能来帮助你。Hello@BernardoMarques我用更多信息更新了我的答案。是的，我认为最简单的方法是对他们的主题进行成本化。我在他们的自述文件中发现，当你改变一些东西时，你可以看到它反映在你的styles.scss上。但我是scss新手，我看不到任何变化。通常，对于scss，应该有一个编译de scss文件以生成CSS文件的过程，因此你可能需要设置编译过程。除此之外，您应该检查已经为ag-grid定义的样式。这在第一次渲染时有效，但在重新排序后无效，我想我需要检查reorder script某处=Hello@BernardoMarques如果你提供一个在线工作示例，我可能可以通过检查你的脚本的功能来帮助你。Hello@BernardoMarques我用更多信息更新了我的答案。是的，我认为最简单的方法是对他们的主题进行成本化。我在他们的自述文件中发现，当你改变一些东西时，你可以看到它反映在你的styles.scss上。但我是scss新手，我看不到任何变化。通常，对于scss，应该有一个编译de scss文件以生成CSS文件的过程，因此你可能需要设置编译过程。除此之外，您应该检查已定义的ag网格样式。