Question

我正在使用带有Angular 4的ag-grid。我希望能够在运行时更改各个列标题的背景颜色。

似乎我必须在coldefs中使用headerComponentFramework属性，但我不知道如何使用它。有人有想法吗？

的问候，亚历

Answer 1

如果使用Sass，则可以设置header-background-color主题参数。

下面的示例假定您使用的是alpine主题。

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";

.ag-theme-alpine {
    @include ag-theme-alpine((
        header-background-color: deeppink
    ));
}

https://www.ag-grid.com/javascript-grid-themes-customising/#setting-parameters-using-sass

Answer 2

Here is a plunker演示了您想要的标题组件。我从docs for ag-grid的例子中得到了它。看看header.component.html，这就是魔法所在的地方。

我认为唯一令人困惑的部分是当你创建HeaderComponent时：

export class HeaderComponent implements IHeaderAngularComp {
    public color: string = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    public params: MyParams;
    private elementRef: ElementRef;

    ...

    //You will need to get the params from agInit so that you can access
    //the value for each column

    agInit(params: MyParams): void {
        this.params = params;
    }
}

请查看他们的docs了解更多解释，他们每天都会变得更好

Answer 3

如果标题具有一组预定义的颜色，则可以使用headerClass选项：

defaultColDef: {
  headerClass: function(params) {
    // logic to return the correct class
    return 'header-one';
  }
}

然后在CSS中使用background-color属性：

.header_one {
  background-color: red;
}

请参见以下示例，其中单击单元格会更改标题颜色：

https://stackblitz.com/edit/ag-grid-header-color-dynamic?file=index.js

ag-grid：如何在列标题中设置自定义背景颜色？

3 个答案: