如何为 ag-grid 中的特定行着色？答案

【问题标题】：How to color specific rows in ag-grid?如何为 ag-grid 中的特定行着色？
【发布时间】：2019-07-22 15:42:30
【问题描述】：

我有一个 ag 网格，我只想为一些行号着色。例如，处理后我发现我必须只为第 1、4 和 5 行着色。

我尝试了ag-grid的getRowStyle功能，但没有成功

gridOptions.getRowStyle = function(params) {
    if (params.node.rowIndex % 2 === 0) {
    return { background: 'red' }
    }
}

【问题讨论】：

看看这个。 ag-grid.com/javascript-grid-row-styles。看起来您已经从那里获取了代码，所以它应该可以工作。请记住，使用您发布的功能仅适用于奇数行（不适用于第 4 行）。如果您只需要 1、4 和 5，那么您应该匹配这些索引。
还有。如果你能准确描述什么是不工作的，它会更容易提供帮助。
为什么不添加函数，因为没有修复行索引，并且您根据某些规则的处理来决定索引

标签： angular ag-grid-angular

【解决方案1】：

这里有一些代码directly from the documentation

如果您只需要为某些行着色。您需要知道要为哪些行着色。我假设您对此有一个状态。也许是一个名为indices 的变量？

indices: Array<number> = [1,4,5]; // color these rows

gridOptions.getRowStyle = (params) => { // should use params, not indices in the first braces. Binds the component to this. Can use indices in the function now
    if (this.indices.includes(params.node.rowIndex)) {
        return { background: 'red' }
    }
}

如果您需要更多帮助，则需要更具体。我不知道什么不起作用。

Here is a Plunkr with an example。我不确定您是如何在项目中设置所有内容的，但您可能会获得一些关于如何修改代码以适应我从 ag-grid 文档调整的示例的想法。我希望示例有所帮助

【讨论】：

谢谢，我已经看过了，但没有帮助。我需要只为 1、3、6 等几行着色的特定解决方案。如果您能提供帮助。
谢谢，我试过这个解决方案，但函数（）中的数组索引似乎不可读。我试过你的解决方案，它给了我这个错误：Can not read property indices of undefined at getRowStyle
是的，当然。我现在看到 this 指向的是 gridOptions 而不是你的类。我已经更新了我的答案，通过改变调用函数的方式，将你的组件绑定到这个，而不是 gridOptions。
我仍然无法读取未定义错误的属性“索引”。请在此处查看 plunkr 代码：plnkr.co/edit/OT6dJlqbhn0K87CNxrmk?p=preview
我犯了一个错误。 getRowStyles = (indices) => {} 实际上应该是 getRowStyles = (params) => {}。我更新了我的答案，并添加了一个 plunkr

【解决方案2】：

你可以试试这个吗，因为你想根据你对行的处理来突出显示行，所以应该把一些规则如下并突出显示行

gridOptions.rowClassRules: {
  // apply green to 2008
  'rag-green-outer': function(params) { return params.data.year === 2008},

  // apply amber 2004
  'rag-amber-outer': function(params) { return params.data.year === 2004},

  // apply red to 2000
  'rag-red-outer': function(params) { return params.data.year === 2000}
}

通过这种方式，您可以根据您的标准为您的行着色。这仅取自 ag gird webporal。

【讨论】：