如何根据 Header 名称而不是字段名称隐藏和显示 ag-grid 列

Question

我正在尝试 hide/show 使用 ag-grid 基于标题名的列。正如您在下面看到的，我使用 setColumnsVisible 来实现相同的目的。但我需要基于 headername amd 而不是字段。

{ headerName: 'Rating Name', field: 'newRatingName', filter: true}
this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], false);true }

还有其他方法可以实现吗？

Answer 1

如果您有权访问 columnApi，那么我建议您使用 columnApi 和 headerName 获取列，然后使用它来设置可见性。

例如：

const ratingNameColumn = this.gridColumnApi.getAllColumns().find(x => x.colDef.headerName == 'Rating Name');

this.gridColumnApi.setColumnVisible(ratingNameColumn, false);

Here's 给你的 StackBlitz。

Answer 2

您可以在列定义中使用隐藏属性来有条件地隐藏您的列。这是一个布尔值属性，可以设置为 true/false。例如：

{ headerName: 'Rating Name', 
  field: 'newRatingName', 
  filter: true,
  hide: this.shouldHide(),
}
shouldHide = () => (true);

如何根据 Header 名称而不是字段名称隐藏和显示 ag-grid 列

HOw to hide and Show ag-grid columns based on Header name rather than field name

show-hide

ag-grid

angular7