Question

我目前正在使用Angular和ag-grid来显示包含各种数据的表，此数据中的列将包含值＆＃34; Fail＆＃34;或者＆＃34;通过＆＃34;。

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

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

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

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

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 功能 e.g。

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

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

干杯

ag-grid渲染行与背景颜色

1 个答案: