亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 agGrid 中更新 defaultColDef

如何在 agGrid 中更新 defaultColDef

江戶川亂折騰 2023-03-24 17:10:32
我有一個帶有按鈕切換的自定義列過濾器。默認情況下,列過濾器設置為 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
查看完整描述

2 回答

?
翻過高山走不出你

TA貢獻1875條經驗 獲得超3個贊

您需要使用 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將呈現您的過濾器組件的函數。


查看完整回答
反對 回復 2023-03-24
?
慕容3067478

TA貢獻1773條經驗 獲得超3個贊

要更新 agGrid 中的 defaultColDef,您可以使用 setDefaultColDefgridApi 中的方法傳遞全新的 colDef。并且不要忘記刷新所有標題。


this.gridApi.api.setDefaultColDef({

        ...this.defaultColDef,

        floatingFilter: true

    });

    this.gridApi.api.refreshHeader();

希望這會有所幫助


查看完整回答
反對 回復 2023-03-24
  • 2 回答
  • 0 關注
  • 342 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號