如何有条件地隐藏 ag 网格中的列

Posted 2023-03-28

【中文标题】如何有条件地隐藏 ag 网格中的列

【英文标题】：How to hide column in ag grid conditionally

【发布时间】：2021-12-05 06:03:25

【问题描述】：

在 columndef 我们创建列，但我们必须有条件地隐藏该列

columndefs
[
     field: action,
      hide: true ]

【问题讨论】：

你试过ngIf="!element.hide"吗？您可以将您的 html 和 ts 文件附加到问题中吗？

【参考方案1】：

您可以尝试使用gridApi接口并使用setColumnDefs()方法来实现。

const columndefs=[ field:action, hide: true, [..restfields]]
this.this.gridApi.setColumnDefs(columndefs);

请注意，在设置 columndefs 时，您需要再次提供所有列定义，您不能在隔离中这样做。

【参考方案2】：

您需要迭代您的 columnDef 并检查您需要动态隐藏的列。参考下面的代码。

let obj = this.columndefs.find(
                o => o.field === 'action' // pass this dynamically 'action'
           );
 obj.hide = false; // Set to false

 // After set to false you need to make call setColumnDefs from gridApi
 this.gridApi.setColumnDefs(
      columndefs // pass your columnDef
 );

你会得到gridApi对象，在aggrid提供的onGridReady回调中。

public onGridReady(params) 
/**
* Function is called when grid is instantiated.
* @param params Ag grid params
*/
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;

HTML 代码：

<ag-grid-angular class="ag-theme-alpine" [columnDefs]="columnDefs [gridOptions]="gridOptions" (gridReady)="onGridReady($event)"></ag-grid-angular>

【参考方案3】：

在挂载后隐藏单列（在“网格就绪”之后），无需完全重新加载：

gridOptions.columnApi.hideColumn(colId: any, hide: any)

与hideColumns 相同。如果colId 未定义，expect(column.colId).to.equal(colDef.field)。

或者在挂载后重置ColumnState：

const savedState = columnApi.getColumnState();
savedState.find(x => x.colId === myColDef.field).hide = true;
columnApi.setColumnState(savedState);

或者：

gridOptions.api.setColumnDefs(columndefs)

或将columnDefs 与 vue/angular/etc 绑定，然后更新 columnDefs。

<ag-grid-angular [columnDefs]="columnDefs" ...
<ag-grid-vue :columnDefs="columnDefs" ...