如何在 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() {&nbsp;&nbsp;&nbsp; &nbsp; /*&nbsp;&nbsp;&nbsp; &nbsp; this.defaultColDef = {...this.defaultColDef, floatingFilter: true};&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; this.gridApi.refreshHeader();&nbsp; &nbsp; }, 0);*/&nbsp; &nbsp; &nbsp;var columnDefs = this.gridApi.getColumnDefs();&nbsp; &nbsp; columnDefs.forEach(function (colDef, index) {&nbsp; &nbsp; colDef.floatingFilter = true;&nbsp; });&nbsp; this.gridApi.setColumnDefs(columnDefs);&nbsp; }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({&nbsp; &nbsp; &nbsp; &nbsp; ...this.defaultColDef,&nbsp; &nbsp; &nbsp; &nbsp; floatingFilter: true&nbsp; &nbsp; });&nbsp; &nbsp; this.gridApi.api.refreshHeader();希望这会有所帮助