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

Question

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

我尝试了 ag-grid 的 getRowStyle 函数但是没有成功

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

Answer 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 文档中调整的示例的想法。我希望这个例子对你有帮助

Answer 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。

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

How to color specific rows in ag-grid?

angular

ag-grid-angular