Question

我正在尝试在ag-grid（社区版）单元上应用多个单元类。我想更改单元格背景并将单元格字体设置为等宽字体。我定义了两个 columnTypes ： tomatoBackground 和 monospaceFont 。接下来，我设置提供两个 columnTypes 的表列“ type”属性。

columnDefs: [
    {
        headerName: "Athlete",
        field: "athlete"
    },
    {
        headerName: "Sport",
        field: "sport"
    },
    {
        headerName: "Age",
        field: "age",
        type: ["tomatoBackground", "monospaceFont"]
    }
]

columnTypes: {
    tomatoBackground: {
        cellClass: "ag-cell--tomato-background"
    },
    monospaceFont: {
        cellClass: "ag-cell--monospace-font"
    }
}

CSS代码：

.ag-cell {
   &--tomato-background {
      background-color: tomato;
   }

   &--monospace-font {
      font-family: monospace, 'Roboto', sans-serif;
   }
}

不幸的是，实际上只有最后一个 cellClass 应用于“年龄”列（在本例中为 monospaceFont ）。对我来说，创建一个同时具有CSS属性（番茄背景和等宽字体）的CSS类不是一种选择。

有人可以帮助解决问题吗？可能吗一个例子将不胜感激。

Answer 1

当您指定多种类型时，ag-grid将覆盖属性，而不是将它们组合在一起。因此，您可以做的是直接在该列的cellClass属性中指定一个数组。

{
    headerName: "Age",
    field: "age",
    cellClass: ["ag-cell--tomato-background", "ag-cell--monospace-font"]
}

请参阅有关cellClass的以下文档： https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class

在ag-grid列上应用多个cellClass

1 个答案: