如何在 agGrid 中更新 defaultColDef

Question

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

而如果我们当时默认将 floatingFilter 设置为 true，那么如果我们将按钮切换到 show/hide floatingFilter，它将显示过滤器。

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

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);
  }

网格HTML:

<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

当前行为点击按钮不显示浮动滤镜（当flaotingFilter默认为false，动态改为true时）

预期行为它应该在

时显示浮动过滤器

ag-Grid 版本：23.2.1

Answer 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 函数，它将呈现您的过滤器组件。

如何在 agGrid 中更新 defaultColDef

How to update defaultColDef in agGrid

javascript

ag-grid

angular

ag-grid-angular