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 单元格 Class 规则来定义它，因为我的网格中有数百列。 我想使用类似 rowClassRules 的东西，它可以作为输入传递给 Ag-grid。这可能吗？

Answer 1

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

使用默认列 def:

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 演示。