ag-grid-react：getSortModel 不是一个函数

Question

我正在尝试使用 getSortModel() 从 ag-grid-react 组件获取排序模型，但我得到 getSortModel 不是一个函数

我的代码

 onSortChanged={useCallback(e => console.log(e.api.getSortModel(), 'im from sort'))}

“@ag-grid-community/react”：“27.3.0”， “@ag-grid-enterprise/all-modules”：“27.3.0”，

Answer 1

花了一些时间发现

params.api.getSortModel()

在24.0.0版本后已被弃用。

使用Column state获取Sort模型并按以下方式设置Sort模型

获取排序模型：

   const onSortChanged = useCallback(() => {
        const value = gridParams.columnApi.getColumnState().find(s => s.sort != null)
        if (value) {
            setSortModel([ value ])
        } else {
            setSortModel([])
        }
    }, [ gridParams, setSortModel ])

设置排序模型：

useEffect(() => {
    if (sortModel.length > 0) {
       const curretSortModel = gridParams.columnApi.getColumnState()
       const mergeSortModel = curretSortModel.map(o1 => sortModel.find(o2 => o2.colId === o1.colId) || o1)
       gridParams.columnApi.setColumnState(mergeSortModel)
     }
}, [gridParams, sortModel]

Answer 2

根据此 plunkr，您可以使用以下示例检索并应用排序：https://plnkr.co/edit/?open=index.jsx&preview

 const sortByAthleteDesc = useCallback(() => {
    gridRef.current.columnApi.applyColumnState({
      state: [{ colId: 'athlete', sort: 'desc' }],
      defaultState: { sort: null },
    });
  }, []);


  const saveSort = useCallback(() => {
    var colState = gridRef.current.columnApi.getColumnState();
    var sortState = colState
      .filter(function (s) {
        return s.sort != null;
      })
      .map(function (s) {
        return { colId: s.colId, sort: s.sort, sortIndex: s.sortIndex };
      });
    savedSort = sortState;
    console.log('saved sort', sortState);
  }, []);

Answer 3

对于 Vue JS ：

const onSortChanged = () => {
  window.colState = gridApi.value.getColumnState();
  let newSortedState = window.colState
    .filter(function (s) {
      return s.sort != null;
    })
    .map(function (s) {
      return { colId: s.colId, sort: s.sort, sortIndex: s.sortIndex };
    });
  console.log('column state saved', newSortedState);
};

模板：

<ag-grid-vue
    :gridOptions="gridOptions"
    :columnDefs="props?.columns"
    :icons="icons"
    :rowHeight="props?.rowHeight"
    style="height: 500px"
    :enableRangeSelection="false"
    :rowSelection="'multiple'"
    :rowMultiSelectWithClick="false"
    class="ag-theme-quartz"
    :paginationPageSizeSelector="[3, 5, 10, 15, 25, 50]"
    :sideBar="sideBar"
    @grid-ready="handleGridReady"
    @selection-changed="handleSelectionChange"
    :defaultColDef="props?.defaultColDef"
    @sortChanged="onSortChanged"
    :rowModelType="rowModelType"
    :pagination="true"
    :paginationPageSize="paginationPageSize"
    @filter-changed="onFilterChanged"
  />