如何在 agGrid 中更新 defaultColDef

Question

我有一个带有按钮切换的自定义列过滤器。默认情况下，列过滤器设置为 false。当我单击按钮时，通过设置 floatingFilter: true 来切换列过滤器。当单击按钮期间 floatingFilter 变为 true 时，它不显示过滤器。而如果我们当时默认将 floatingFilter 设置为 true，则它会显示过滤器，如果我们切换按钮以显示/隐藏 floatingFilter，它会按预期工作。我可以知道如何在 ag-grid 中动态更新 defaultColDef 以使 floatingFilter 在按钮单击期间为真。默认ColDef：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>示例：https://plnkr.co/edit/w2UDNd4u657tdr0Q? preview当前行为 在按钮点击期间不显示浮动过滤器（当 flaotingFilter 默认为 false 并动态更改为 true 时）预期行为 它应该在以下情况下显示浮动过滤器农业网格版本：23.2.1

Answer 1

您需要使用 columnDefs 而不是 defaultColDef 来执行此操作。插件链接

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然后colDefs在方法中使用对象setupFloatingFilter，因此在 defaultColDefs 中设置值是没有用的。

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

Answer 2

要更新 agGrid 中的 defaultColDef，您可以使用 setDefaultColDefgridApi 中的方法传递全新的 colDef。并且不要忘记刷新所有标题。

this.gridApi.api.setDefaultColDef({

        ...this.defaultColDef,

        floatingFilter: true

    });

    this.gridApi.api.refreshHeader();

希望这会有所帮助