以角度在 ag-grid 中保存列標題過濾器

Question

我正在開發一個現有的應用程序，在該應用程序中，他們使用 ag-grid 庫為應用程序中的大多數網格進行角度處理。 現在，ag-grid 提供了通過使用列標題中的過濾器選項基於列值過濾網格的功能。 我正在提供指向該https://www.ag-grid.com/angular-data-grid/filtering-overview/的鏈接。 我想實現一個功能，我們可以保存用戶正在搜索的過濾器關鍵字，當他回到同一個網格時，已經應用了之前的過濾器。 例如https://plnkr.co/edit/?p=preview&preview在這里我們可以選擇運動員並通過轉到列並搜索值來過濾它所以我想要的是如果我搜索“abc”我應該能夠保留那個。 有沒有辦法做到這一點 ？ 我正在為上面的鏈接提供 colDef

this.columnDefs = [
      { field: 'athlete' },
      {
        field: 'age',
        filter: 'agNumberColumnFilter',
        maxWidth: 100,
      },
      {
        field: 'date',
        filter: 'agDateColumnFilter',
        filterParams: filterParams,
      },
      {
        field: 'total',
        filter: false,
      },
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 150,
      filter: true,
    };
  }

任何形式的幫助表示贊賞，謝謝:)

Answer 1

您可以使用 Grid Event onFilterChanged保存應用的過濾器。 在這里，您可以通過調用api.getFilterModel()來獲取 filterModel。 在下面的 plunkr 中，我們通過將過濾器模型保存到本地存儲並通過在 Grid Event onFirstDataRendered應用它來恢復它來展示這onFirstDataRendered

  onFilterChanged(params) {
    const filterModel = params.api.getFilterModel();
    localStorage.setItem('filterModel', JSON.stringify(filterModel));
  }

  onFirstDataRendered(params) {
    const filterModel = JSON.parse(localStorage.getItem('filterModel'));
    if (filterModel) {
      params.api.setFilterModel(filterModel);
    }
  }

在下面的plunkr中看到這個實現

您還可以找到以下相關文檔頁面：

保存和恢復過濾器模型

網格事件

Answer 2

要將現有過濾器應用於 ag-grid，可以通過在 gridApi 上設置 filterModel 來完成。

    gridApi.getFilterInstance("fieldName").setModel({
        "filterType":"equals", //type of filter condition
        "type":"text", //Type of column [text/number/date]
        "filter":"value" //Value need to be applied as filter.
     })

類似的 onFilterChanged 事件，您可以捕獲更改並動態應用過濾器。