javascript - ag-grid 渲染具有背景颜色的行

Question

我目前正在使用 Angular 和 ag-grid 来显示一个包含各种数据的表格，该数据中的一列将包含值“失败”或“通过”。

我目前正在研究在检测到失败时将行背景渲染为红色的能力。

我遇到的问题是我找不到此代码的任何示例。

我推断我可以做很多事情，特别是在 api 中使用多个回调来执行这样的功能。但作为 Web 开发领域(至少是前端)的新手，我发现如何使用这些回调的确切内容难以捉摸。

好吧，我有以下已知方法:

1)

gridOptions.getRowStyle(params) {
    if (params.data.myColumnToCheck === myValueToCheck) {
        return {'background-color': 'yellow'}
    }
    return null;
}

2) processRowPostCreate 回调 - 没有已知代码

3)这就是我目前所拥有的，并且来 self 的头脑 - 但它是丑陋的代码，并且在工作时我确信它比我看到的实际建议更昂贵和更差。

vm.toggleColour = function () {
    vm.state.colour = !vm.state.colour;
    if (vm.state.colour) {
        columnDefs = [
            { headerName: "S", field: "1", width: 210, sort: "asc", cellStyle: changeRowColor },
            { headerName: "TS", field: "2", width: 170, cellStyle: changeRowColor },
            { headerName: "TC", field: "3", width: 195, sort: "asc", cellStyle: changeRowColor },
            { headerName: "H", field: "4", width: 60, cellStyle: changeRowColor },
            { headerName: "TV", field: "5", width: 85, cellStyle: changeRowColor },
            { headerName: "Verdict", field: "6", width: 60, cellStyle: changeRowColor },
            { headerName: "Message", field: "Message", width: 85, cellStyle: changeRowColor },
            { headerName: "Timestamp", field: "Timestamp", width: 175, cellStyle: changeRowColor },
            { headerName: "Audit Num", field: "AuditNum", width: 95, cellStyle: changeRowColor },
            { headerName: "Fail Reasons", field: "Reasons", width: 1430, cellStyle: changeRowColor }
        ];
    }
    else {
        columnDefs = [
            { headerName: "S", field: "1", width: 210, sort: "asc" },
            { headerName: "TS", field: "2", width: 170 },
            { headerName: "TC", field: "3", width: 195, sort: "asc" },
            { headerName: "H", field: "4", width: 60 },
            { headerName: "TV", field: "5", width: 85 },
            { headerName: "Verdict", field: "6", width: 60 },
            { headerName: "Message", field: "Message", width: 85 },
            { headerName: "Timestamp", field: "Timestamp", width: 175 },
            { headerName: "Audit Num", field: "AuditNum", width: 95 },
            { headerName: "Fail Reasons", field: "Reasons", width: 1430 }
        ];
    }
    resizeColumns();
    vm.gridOptions.api.setColumnDefs(columnDefs);
};
function changeRowColor(params) {
    if (params.node.data.FinalVerdict === 'Fail') {
        return { 'background-color': '#red' };
    }
}

有谁知道如何做我想做的事情，而不需要像我现在这样编写一些非常可怕的代码？

我应该说，我更希望能够向行注入(inject)一个类，并在可能的情况下让 css 设置它的样式 - 关于如何做到这一点有什么想法吗？重新绘制网格真是太痛苦了!

谢谢大家

Answer 1

尝试以下操作。

将getRowStyle回调连接到函数changeRowColor
将以下行添加到您的 gridOptions 对象中。

getRowStyle:changeRowColor

然后根据需要定义changeRowColor函数
例如

gridOptions={
  columnDefs: blah,
  rowData: blah,
  ...
  getRowStyle:changeRowColor
}

function changeRowColor(params) {
    if (params.data.FinalVerdict === 'Fail') {
        return { 'background-color': '#red' };
    }
}

干杯