简单地以编程方式删除所有分组和过滤的方法

问题描述

当网格加载时，没有应用分组/过滤。我希望能够删除用户手动应用的所有分组/过滤条件，即将网格格式恢复为原始状态。

解决方法

在这里，您可以删除所有过滤器和行组。有关更多信息，请参见GridApi。

gridApi.setFilterModel(null);
gridApi.setRowGroupColumns([]);
gridApi.onFilterChanged();

实时示例

,

您可以定义一个功能来重置所有内容

 function ResetGrid(){
   //clear filters
 gridOptions.api.setFilterModel(null);
 //notify grid to implement the changes
 gridOptions.api.onFilterChanged();

 //remove all pivots
 gridOptions.columnApi.setPivotColumns([]);
// disable pivot mode
 gridOptions.columnApi.setPivotMode(false);
 //reset all grouping
 gridOptions.api.setColumnDefs(columnDefs);
//where columDefs is the object you used while creating grid first time.
  }    

上面的方法可以满足您的要求，但是更复杂的方法是保存列状态（它可能处于初始阶段，或者在某些操作之后）。

    function saveState() {
     window.colState = gridOptions.columnApi.getColumnState();
     window.groupState = gridOptions.columnApi.getColumnGroupState();
     window.sortState = gridOptions.api.getSortModel();
     window.filterState = gridOptions.api.getFilterModel();
     console.log('column state saved');
      }

    function restoreState() {
      if (!window.colState) {
        console.log('no columns state to restore by,you must save state first');
        return;
      }
      gridOptions.columnApi.setColumnState(window.colState);
      gridOptions.columnApi.setColumnGroupState(window.groupState);
      gridOptions.api.setSortModel(window.sortState);
      gridOptions.api.setFilterModel(window.filterState);
      console.log('column state restored');
    }

    function resetState() {
      gridOptions.columnApi.resetColumnState();
      gridOptions.columnApi.resetColumnGroupState();
      gridOptions.api.setSortModel(null);
      gridOptions.api.setFilterModel(null);
      console.log('column state reset');
    }

这是一个demo

,

您可以在 ag-grid 的 gridOptions 的帮助下进行操作。尝试进行以下更改。

如果尚未初始化列，则初始化gridOptions，并在ag-grid中设置网格选项。

Component.ts

this.gridOptions = {
  defaultColDef: {
    editable: true,resizable: true,filter: true
  },columnDefs: this.columnDefs,rowData: this.rowData
};

使用如下所示清除过滤器

 ...
 gridOptions.api.setFilterModel(null);
 gridOptions.api.onFilterChanged();
 ...

component.html

<ag-grid ..  [gridOptions] = "gridOptions" ..> </ag-grid>

您可以在ag-grid documentation中查看有关此内容的更多信息。