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

Question

加载网格时没有应用 grouping/filtering。我希望能够删除用户手动应用的任何 grouping/filtering，即将网格格式恢复到其原始状态。

Answer 1

以下是删除所有过滤器和行组的方法。有关详细信息，请参阅 GridApi。

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

实例

Answer 2

你可以定义一个函数来重置一切

 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

Answer 3

您可以在 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 中看到更多相关信息。

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

Simple way to programatically remove all grouping and filtering

ag-grid

asp.net-core-3.1

实例