Question

我需要自定义Ag-grid中的标头组（在Angular中）： 1）使其中的文字居中（默认情况下为左对齐）； 2）将每个标题组的背景设为特定颜色

那怎么办？

我尝试在该类的SCSS中执行此操作，但是视图上没有任何变化，即使我将文件从SCSS重命名为CSS。

使用Angular6，Ag-grid v.20，SCSS。

请帮助！

TIA，奥列格（Oleg）

Answer 1

要使文本居中，您需要像这样手动定义CSS文件中的组件：

    ::ng-deep .ag-header-cell-label {
      display: flex;
      justify-content:center;

      ::ng-deep .ag-header-cell-text {
        display:flex;
        align-items:center;
      }
    }

对于背景颜色，您可以执行与上述操作类似的操作，只需使用:: ng-deep选择要修改的班级。

希望这会有所帮助！

Answer 2

要使标题组文本在ag-Grid中居中，您需要做的就是在justify-content类上使用.ag-header-group-cell-label CSS属性。

您可能必须在您的主要styles.scss（与index.html，package.json等位于同一目录级别的目录）上进行设置

.ag-header-group-cell-label {
  justify-content: center;
}

同样，这是自定义标题组颜色的方式。

.ag-header-group-cell-with-group {
    background-color: blue;
}

这里是demo供您参考。我已经对styles.css文件进行了更改。

关于自定义标题组，您应该通过编写自己的自定义header group components来实现。

例如，这是您应该在包含ag-grid的组件上定义columnDefs的方式，其中标题组称为“个人”，而自定义组件称为customHeaderGroupComponent

this.columnDefs = [
  {
    headerName: "Personal",
    headerGroupComponent: "customHeaderGroupComponent",
    children: [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
      }]
  },
]

您可以在here

上参考演示的其余部分。

Answer 3

我需要做完全相同的事情，但我发现其他答案并没有完全回答我的问题。文档主要讨论使用组件进行渲染，但这对我不起作用，我发现应用一些简单的样式有点过头了。您必须为 ag-header-group-cell-with-group 定义 CSS 样式 - 这是主键。否则，即使您在列定义中指定了 headerClass，样式也不会显示在您的 UI 上。以下是如何在 CSS 中执行此操作：

::ng-deep .ag-header-group-cell-with-group {
    .ag-header-group-cell-label {
        justify-content: center;
    }
}

::ng-deep .ag-header-group-cell-with-group.blueFill {
    background-color: blue;
}

::ng-deep .ag-header-group-cell-with-group.redFill {
    background-color: red;
}

在您的列定义中应用如下样式：

{
    headerName: 'Parent Group A',
    headerClass: 'blueFill',
    children: [...]
},
{
    headerName: 'Parent Group B',
    headerClass: 'redFill',
    children: [...]
}

自定义Ag-grid标头组

3 个答案: