我在向 AG 网格表上的行组添加动态样式时遇到问题，因为我需要每个行组都有自己的来自 API 的自定义背景颜色（十六进制）。
我尝试过将AG Grid的
autoGroupColumnDefcellStyle为了说明我想要的东西，我画了一张图。
图片
这是我的代码：
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返回的每个值都有这样的结构，然后按照AG Grid进行分组：
{
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
}
有人可以帮忙吗？
我找到了解决方案。最后我只好检查孩子离开，拿了组里的第一个。当叶子为空时，意味着颜色不会改变，因为该级别在 API 发送的对象中没有颜色。当它是一个组时，它就会有一个颜色，所以它可以应用。最后代码就变成这样了
autoGroupColumnDef: {
pinned: 'left',
minWidth: 1000,
headerName: lblColunaDescricao,
// what i changed
cellStyle: (cell) => {
// check if the information displayed is the description
// (the last child in my case)
if (cell.node.field != "descricaoCIP") {
// get any value from the group
const nodeData = cell.node.allLeafChildren[0].data;
// get the level
const level = cell.node.level + 1;
return {
// get the color from the value
backgroundColor: nodeData['color' + level]
}
}
},
cellClassRules: {
"cell-blue": function(params) {
return params.node.field == "descricaoCIP"
},
"total-cell-left-no-bg": function(params) {
return params.node.field != "descricaoCIP"
}
}
},