如何在 agGrid 中更新 defaultColDef答案

【问题标题】：How to update defaultColDef in agGrid如何在 agGrid 中更新 defaultColDef
【发布时间】：2021-01-10 13:04:06
【问题描述】：

我有一个带有按钮切换的自定义列过滤器。默认情况下，列过滤器设置为 false。当我单击按钮时，通过设置 floatingFilter: true 来切换列过滤器。虽然在单击按钮期间 floatingFilter 变为 true，但它不显示过滤器。

然而，如果我们在那个时候将 floatingFilter 设置为默认值，那么如果我们切换按钮以显示/隐藏 floatingFilter 它会显示过滤器，那么它会按预期工作。

我可以知道如何在 ag-grid 中动态更新 defaultColDef 以使 floatFilter 在按钮单击期间为真。

defaultColDef:

this.defaultColumnDefs = {
      suppressMenu: true,
      suppressMovable: true,
      sortable: true,
      resizable: true,
      floatingFilter: this.hasFloatingFilter
    };

切换过滤器：

toggleFloatingFilter() {
    this.hasFloatingFilter = !this.hasFloatingFilter;
    this.clearSelectedRows();
    this.gridApi.setRowData(this.rowData);
    this.defaultColumnDefs = {...this.defaultColumnDefs, floatingFilter: this.hasFloatingFilter};
    if (!this.hasFloatingFilter) {
      this.gridApi.setFilterModel(null);
      this.loadData();
    }
    setTimeout(() => {
      this.gridApi.refreshHeader();
    }, 0);
  }

GridHTML：

<app-data-grid
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColumnDefs"
          [overlayNoRowsTemplate]="overlayNoRowsTemplate"
          [frameworkComponents]="frameworkComponents"
          [rowData]="rowData"
          [hasMultipleRows]="rowSelection"
          [hasRowAnimation]="hasRowAnimation"
          [multiSortKey]="multiSortKey"
          (rowDataChanged)="onRowDataChanged()"
          (selectionChanged)="onSelectionChanged()"
          (rowClicked)="gotoDetailView($event)"
          (sortChanged)="onSortChanged($event)"
          (columnResized)="onColumnResized()"
          (gridReady)="OnGridReady($event)"
        >
        </app-data-grid>

AppDataGrid 组件：

export class DataGridComponent {
  gridApi;
  gridColumnApi;

  constructor() {}
  @Input() columnDefs: DeviceColumns;
  @Input() rowData: any[];
  @Input() overlayNoRowsTemplate: any;
  @Input() defaultColDef: any;
  @Input() hasMultipleRows: boolean;
  @Input() hasRowAnimation: boolean;
  @Input() hasFloatingFilter: boolean;
  @Input() frameworkComponents: any;
  @Input() multiSortKey: string;
  @Output() gridReady = new EventEmitter();
  @Output() selectionChanged = new EventEmitter();
  @Output() rowClicked = new EventEmitter();
  @Output() rowDataChanged = new EventEmitter();
  @Output() sortChanged = new EventEmitter();
  @Output() columnResized = new EventEmitter();

  onGridReady(params): void {
    this.gridApi = params.api;
    this.gridReady.emit(params);
    this.gridApi.setGridAutoHeight(true);
  }

  onSelectionChanged(): void {
    this.selectionChanged.emit(this.gridApi);
  }

  onRowClicked(params): void {
    this.rowClicked.emit(params.data);
  }

  onRowDataChanged(): void {
    this.rowDataChanged.emit();
  }

  onSortChanged(params): void {
    this.sortChanged.emit(params.api.getSortModel());
  }

  onColumnResized() {
    this.columnResized.emit(this.gridApi);
  }
}

Ag-Grid HTML

<ag-grid-angular
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [overlayNoRowsTemplate]="overlayNoRowsTemplate"
  [frameworkComponents]="frameworkComponents"
  (selectionChanged)="onSelectionChanged()"
  (rowDataChanged)="onRowDataChanged()"
  (rowClicked)="onRowClicked($event)"
  (sortChanged)="onSortChanged($event)"
  [suppressRowClickSelection]="true"
  [rowSelection]="hasMultipleRows"
  [animateRows]="hasRowAnimation"
  [multiSortKey]="multiSortKey"
  (columnResized)="onColumnResized()"
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

示例：https://plnkr.co/edit/w2UDNd4u657tdr0Q?preview

当前行为按钮点击时不显示浮动过滤器（当浮动过滤器默认为false并动态更改为true时）

预期行为它应该显示浮动过滤器

ag-Grid 版本：23.2.1

【问题讨论】：

有几个答案here 和here。如果一切都不起作用，请考虑在github 上提交问题并希望最好。
@NearHuscarl 我已经研究了这些问题，并在我的代码中实现了其中一些。问题是当我们动态设置浮动过滤器时，那时浮动过滤器没有显示。你可以检查我添加的 plunker
我不使用角度，但 vue 中的代码有效（我链接的第二个答案）。虽然较新版本的 agGrid 可能存在其他问题。

标签： javascript angular ag-grid ag-grid-angular

【解决方案1】：

您需要使用 columnDefs 而不是 defaultColDef 来执行此操作。 plunkr link

showFilter() {  
    /*  
    this.defaultColDef = {...this.defaultColDef, floatingFilter: true};

    setTimeout(() => {
      this.gridApi.refreshHeader();
    }, 0);*/
     var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function (colDef, index) {
    colDef.floatingFilter = true;
  });
  this.gridApi.setColumnDefs(columnDefs);
  }

AG网格在渲染网格时将defaultColDefs与colDefs合并，然后在setupFloatingFilter方法中使用colDefs对象，因此在defaultColDefs中设置值是没有用的。

调用gridApi.setColumnDefs 调用HeaderContainer.prototype.init 从而呈现您的过滤器组件，而调用refreshHeader 内部调用gridPanel.setHeaderAndFloatingHeights 和headerRootComp.refreshHeader 但没有调用init 函数将呈现您的过滤器组件。

【讨论】：