angular8 - 如何使用 Angular 中的 Ag Grid 根据列值组为行添加颜色？

Question

我需要根据一组列值向行添加颜色，如下图所示，使用 Angular 中的 AG Grid。我不想在这里使用行组功能。我想为值 Test1 添加一种颜色，为值 Test2 添加不同的颜色。这些值可以是动态的。我怎样才能实现它？

我正在使用 Ag 网格版本 22。

标签： angular8ag-gridag-grid-angular

Answer 1

如果我理解正确，那么您想根据网格的 column2 中存在的值为行着色。为此，您可以执行以下操作：

gridOptions.rowClassRules: {
    'green': 'data.Column2 == "Test1"',
    'amber': 'data.Column2 == "Test2"',
    'red': 'data.Column2 == "Test3"'
}

gridOptions.getRowClass = getRowClass;
}

function getRowClass(params){
  switch(params.data.Column2){
    case 'Test1':
    return 'green1';
    case 'Test2':
    return 'green2';
    case 'Test3':
    return 'green3';
    case 'Test4':
    return 'red';
    ..
    ..
    default:
    return '';
   }
}