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

Posted 2023-03-28

【中文标题】如何在 Angular 中使用 Ag Grid 根据列值组为行添加颜色？

【英文标题】：How can I add color to the rows based on the group of column values using Ag Grid in Angular?

【发布时间】：2021-02-03 23:28:09

【问题描述】：

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

我使用的是 Ag 网格版本 22。

【问题讨论】：

在 td 标签中使用 ng-if

我无权访问 td，因为这是一个 ag-grid 功能！表格、列和数据将由 Ag Grid 组件生成。

使用来自 ag-grid 的 Cell Style 功能。

您好，感谢您的更新。我检查了 CellStyle 但他们正在根据某些值应用颜色。我有动态值，如 Test1、Test2、Test3 等。我应该能够根据这些值动态应用颜色，而无需硬编码。

@Nithin 您可以根据 params.value 在Cell Style 中指定条件来为该单元格着色，否则您可以使用Row Style 为整个行着色

【参考方案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 '';
   

【讨论】：

您好，感谢您的解决方案。我将无法设置这样的条件，因为 Test1、Test2 等值是动态的。它们可以是 300 个值中的任何一个。

明白了！但是您必须在正确的地方定义逻辑？

我猜他希望所有唯一值都使用不同的颜色。可能可以将值/颜色放入地图中，如果值已经在地图中，则稍后重用颜色，否则使用新颜色

我同意@JaqenH'ghar。这就是我要说的，他需要在某个地方放置一个查找/映射类型的逻辑，函数可以从中返回基于单元格值的颜色值。