Javascript 带背景色的ag栅格渲染行

我目前正在使用Angular和ag grid显示一个包含各种数据的表格，该数据中的一列将包含值“Fail”或“Pass”

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

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

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

好的，我有以下已知的方法：

(一)

2） processRowPostCreate回调-无已知代码

3） 这是我目前所拥有的，也是我头脑中的想法——但这是一个丑陋的代码，在工作时，我确信它比我所看到的实际建议更昂贵、更糟糕

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' };
    }
}

有没有人对如何做我想做的事情有什么想法，而没有像我现在这样的一点可怕的代码

我应该说，我更希望能够向行中注入一个类，如果可能的话，让css对其进行样式化——关于如何做到这一点，有什么想法吗？重新绘制网格是一件非常痛苦的事情

谢谢大家

试试下面的方法

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

getRowStyle:changeRowColor

然后根据需要定义changeRowColor函数
e、 g

干杯

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' };
    }
}

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

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