ag-grid呈現具有背景色的行

Question

我目前正在使用Angular和ag-grid來顯示包含各種數據的表，該數據中的列將包含值“ Fail”或“ Pass”。

我目前正在研究在檢測到故障時將行背景呈現為紅色的功能。

我遇到的問題是我找不到該代碼的任何示例。

我已經推斷出我可以做很多事情，特別是在api中使用多個回調來執行這樣的功能。 但是，作為Web開發領域（至少是前端）的新手，我發現在使用這些回調方面難以捉摸的確切內容。

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

1）

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

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設置樣式-有關如何執行此操作的任何想法？ 重畫網格是如此痛苦！

多謝你們

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

干杯