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版本后已弃用。

使用列状态获取排序模型并按以下方式设置排序模型

获取排序模型：

   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]

我们使用onGridReady()方法设置 gridParems

const [ gridParams, setGridParams ] = useState()


const onGridReady = useCallback(params => {
    setGridParams(params)
}, [])


<Grid
    onGridReady={onGridReady} // using this we are setting gridParams
    rowData={dataset}
    floatingFilter
    sideBar={GRID_SIDE_BAR}
    onSelectionChanged={getSelectedRowData}
    enableSelect={true}
    onFilterChanged={onFilterChanged}
    onSortChanged={onSortChanged}
    rowSelection={'multiple'}
    licenseKey={'test'}
    getRowId={getRowNodeId}
    onColumnVisible={onColumnVisible}
    onColumnResized={onColumnResized}
    onColumnMoved={onColumnMoved}
    columnDefs={mappedColDefs}
    defaultColDef={defaultColDef}
    cacheQuickFilter={true}
    frameworkComponents={{
        customLoadingOverlay: () => <Paper><Typography>Please wait while your requests are loading...</Typography></Paper>,
        customNoRowsOverlay: () => <Paper><Typography>No requests found</Typography></Paper>
    }}
    loadingOverlayComponent={'customLoadingOverlay'}
    noRowsOverlayComponent={'customNoRowsOverlay'}
/>