如何为AG Grid行组添加来自API的动态自定义背景色？

我在AG Grid表格中给行组添加动态样式时遇到了问题：需要为每个行组设置从API获取的自定义十六进制背景色。尝试使用AG Grid的autoGroupColumnDef搭配cellStyle，但AG Grid仅存储显示值，无法访问对应的颜色数据。

当前代码 #

var levels = "";

if (data != null && data != undefined && data.d != '[]') {
    levels = JSON.parse(data.d)[0].levels;
}

var columnDefs = [{
        headerName: "CT1",
        field: "category1",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 1,
        hide: true
    },
    {
        headerName: "CT2",
        field: "category2",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 2,
        hide: true
    },
    {
        headerName: "CT3",
        field: "category3",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 3,
        hide: true
    },
    {
        headerName: "CT4",
        field: "category4",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 4,
        hide: true
    },
    {
        headerName: "CT5",
        field: "category5",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 5,
        hide: true
    },
    {
        headerName: "CT6",
        field: "category6",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 6,
        hide: true
    },
    {
        headerName: "CT7",
        field: "category7",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 7,
        hide: true
    },
    {
        headerName: "CT8",
        field: "category8",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 8,
        hide: true
    },
    {
        headerName: "CT9",
        field: "category9",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 9,
        hide: true
    },
    {
        headerName: "CT10",
        field: "category10",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 10,
        hide: true
    },
    {
        headerName: "C",
        field: "descriptionC",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 11,
        hide: true
    },
    {
        headerName: "C",
        field: "descriptionC",
        rowGroup: true,
        filter: true,
        hide: true
    },
    {
        headerName: "color1",
        field: "color1",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color2",
        field: "color2",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color3",
        field: "color3",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color4",
        field: "color4",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color4",
        field: "color5",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color6",
        field: "color6",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color7",
        field: "color7",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color8",
        field: "color8",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color9",
        field: "color9",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color10",
        field: "color10",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID1",
        field: "idCategory1",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID2",
        field: "idCategory2",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID3",
        field: "idCategory3",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID4",
        field: "idCategory4",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID4",
        field: "idCategory5",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID6",
        field: "idCategory6",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID7",
        field: "idCategory7",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID8",
        field: "idCategory8",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID9",
        field: "idCategory9",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID10",
        field: "idCategory10",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "",
        field: "edit",
        width: 50,
        cellClass: 'text-center',
        sortable: true,
        hide: masterOnlyView == "1",
        cellClassRules: {
            "gridIconEdit": function(params) {
                return params.node.key != null && params.node.field != "descricaoCIP"
            },
            "text-center": function(params) {
                return params.node.key == null || params.node.field == "descricaoCIP"
            }
        }
    }
];
var obj = JSON.parse(data.d);

var gridOptions = {
    columnDefs: columnDefs,
    singleClickEdit: true,
    stopEditingWhenCellsLoseFocus: true,
    rowSelection: 'multiple',
    groupDefaultExpanded: levels - 1,
    animateRows: true,
    rowData: obj,
    defaultColDef: {
        filter: true,
    },
    autoGroupColumnDef: {
        pinned: 'left',
        minWidth: 1000,
        headerName: lblColunaDescricao,
        cellStyle: (cell) => {
            if (cell.node.field != "descricaoCIP") {
                return {
                    backgroundColor: 'green'
                }
            }
        },
        cellClassRules: {
            "cell-blue": function(params) {
                return params.node.field == "descricaoCIP"
            },
            "total-cell-left-no-bg": function(params) {
                return params.node.field != "descricaoCIP"
            }
        }
    },
};
var eGridDiv = document.querySelector('#myGrid');
eGridDiv.innerHTML = "";

let gridElement = new agGrid.Grid(eGridDiv, gridOptions);
fnGlobalSetGridOptions(gridElement, {
    gridOptions
});

API返回数据结构 #

{
    "category1": "1. CATEG",
    "category2": "1.1. SUB CATEG",
    "category3": "1.1.1. SUB SUB CATEG FV",
    "category4": null,
    "category5": null,
    "category6": null,
    "category7": null,
    "category8": null,
    "category9": null,
    "category10": null,
    "codeC": "FV01.01.02",
    "color1": "#1cd1d4",
    "color2": "#e83030",
    "color3": "#FFFFFF",
    "color4": null,
    "color5": null,
    "color6": null,
    "color7": null,
    "color8": null,
    "color9": null,
    "color10": null,
    "descriptionC": "FV01.01.02",
    "idC": 13161,
    "idCategory1": 49,
    "idCategory2": 50,
    "idCategory3": 52,
    "idCategory4": 0,
    "idCategory5": 0,
    "idCategory6": 0,
    "idCategory7": 0,
    "idCategory8": 0,
    "idCategory9": 0,
    "idCategory10": 0,
    "levels": 3
}

解决方法 #

方法1：通过组节点的aggData获取颜色

AG Grid的组节点会存储聚合后的字段数据，你可以利用这一点直接拿到对应层级的颜色：

1. 先修改所有color字段的聚合函数，avg不适合字符串类型，换成取第一个有效值：

{
  headerName: "color1",
  field: "color1",
  aggFunc: (values) => values.find(val => val != null && val !== undefined),
  hide: true
}

其他color字段同理修改。

2. 修改autoGroupColumnDef中的cellStyle：

cellStyle: (params) => {
  const groupField = params.node.field;
  if (!groupField) return {};

  // 匹配category对应的color字段，比如category1对应color1
  const colorField = groupField.replace('category', 'color');
  // 针对descriptionC单独处理，对应color3
  const targetColorField = groupField === 'descriptionC' ? 'color3' : colorField;
  
  const bgColor = params.node.aggData[targetColorField];
  return bgColor ? { backgroundColor: bgColor } : {};
}

方法2：提前构建组键-颜色映射表

在加载行数据前，先遍历数据生成组名和颜色的映射关系，之后直接通过组节点的key取值：

1. 预处理数据生成映射表：

var obj = JSON.parse(data.d);
const colorMap = {};

obj.forEach(row => {
  // 处理category1到category10的颜色映射
  for (let i = 1; i <= 10; i++) {
    const category = row[`category${i}`];
    const color = row[`color${i}`];
    if (category && color) {
      colorMap[category] = color;
    }
  }
  // 处理descriptionC的颜色，对应color3
  if (row.descriptionC) {
    colorMap[row.descriptionC] = row.color3;
  }
});

2. 修改cellStyle：

cellStyle: (params) => {
  const groupKey = params.node.key;
  const bgColor = colorMap[groupKey];
  return bgColor ? { backgroundColor: bgColor } : {};
}

两种方法都能解决问题，你可以根据自己的业务场景选择。

内容的提问来源于stack exchange，提问作者BrePi