时间戳

首页 > 解决方案 > 如何在 agGrid 中更新 defaultColDef

javascript - 如何在 agGrid 中更新 defaultColDef

问题描述

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

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

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

默认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>

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

标签： javascriptangularag-gridag-grid-angular

解决方案

您需要使用 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将呈现您的过滤器组件的函数。

推荐阅读