Ag-grid ：在不使用列定义中的单元格样式属性的情况下为一行中的单元格着色

Question

[{
    "uniqueIdentifier": "12345",
    "identifier": "UJHU",
    "latitude": 33.68131385650486,
    "longitude": -83.36814721580595,
    "cycle": "1"
    "speedLimit": "255"
    "customerCode": "Standard",
    "altitude" : 12345
    "modifiedKeys": [
      "speedLimit",
      "altitude"
    ]
  },
   {
    "uniqueIdentifier": "13434",
    "identifier": "UJHU",
    "latitude": 93.68131385650486,
    "longitude": -33.36814721580595,
    "cycle": "2"
    "speedLimit": "255"
    "customerCode": "Standard",
    "altitude" : 12345
    "modifiedKeys": [
      "cycle",
      "latitude"
    ]
  }]

上面的 Json 是提供给 Ag-grid 的。如果单元格属于上述 Json 中 modifiedKeys 下的列名，则要求为单元格着色。

我不想使用给定的单元格类规则来定义它here，因为我的网格中有数百列。 我想使用 rowClassRules 之类的东西，它可以作为输入传递给 Ag-grid。这可能吗？

Answer 1

我认为单元格样式规则是要走的路。如果您有数百列，并且不想重复重复的 cellStyle 函数，请将此函数作为默认值添加到列定义中。

使用此默认列定义：

defaultColDef = {
    cellStyle: function(params) {
        console.log(params);
        if (params.node.data.modifiedKeys.some(x => x == params.colDef.field)) {
          //mark police cells as red
          return { backgroundColor: "green" };
        } else {
          return null;
        }
      }
  }

然后像这样将它传递给你的网格：

<ag-grid-angular 
    style="width: 500px; height: 200px;" 
    class="ag-theme-alpine"
    [rowData]="rowData" 
    [defaultColDef]="defaultColDef"
    [columnDefs]="columnDefs">
</ag-grid-angular>

Here 是 StackBlitz 演示。