如何在ag-grid中获取已应用排序的列列表？

我之前也碰到过类似的需求——依赖sortChanged事件或者onSortChanged回调确实有局限，比如没法主动在任意时机获取当前排序状态，只能等排序变化时触发。其实AG Grid提供了更灵活的方式来直接获取已排序的列信息，下面分享两种实用方案：

方案一：直接调用gridApi.getSortModel()（推荐） #

AG Grid的gridApi里内置了getSortModel()方法，它会直接返回当前所有已应用排序的列的完整信息，包括列ID、排序方向，甚至多列排序的优先级顺序。

使用示例： #

// 假设你已经通过ref或其他方式拿到了gridApi实例
const getSortedColumns = () => {
  const sortModel = gridApi.getSortModel();
  // 提取你需要的列信息，比如只保留列ID和排序方向
  const sortedColumns = sortModel.map(sortItem => ({
    colId: sortItem.colId,
    sortDirection: sortItem.sort // 取值为 'asc' 或 'desc'
  }));
  return sortedColumns;
};

// 调用示例：比如点击按钮时获取
document.getElementById('get-sorted-btn').addEventListener('click', () => {
  const result = getSortedColumns();
  console.log('当前已排序的列列表:', result);
});

关键细节： #

• 如果是多列排序，sortModel数组的顺序就是排序的优先级（先排第一个元素对应的列，再排第二个）
• 只有设置了sortable: true的列才会出现在结果中
• 这个方法可以在任意时机主动调用，不需要依赖事件触发

方案二：结合sortChanged事件实时跟踪排序状态 #

如果需要实时同步已排序列的状态（比如在UI上展示当前排序规则），可以结合sortChanged事件和getSortModel()来维护一个本地状态：

// 初始化时监听排序变化事件
gridApi.addEventListener('sortChanged', () => {
  const sortedColumns = gridApi.getSortModel().map(item => item.colId);
  console.log('排序已更新，当前已排序列:', sortedColumns);
  // 这里可以把sortedColumns更新到你的组件状态中，比如React的setState、Vue的data等
});

框架集成示例（React） #

如果你在React项目中使用AG Grid，可以通过useRef获取grid实例后调用API：

import { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

export default function MyGrid() {
  const gridRef = useRef(null);
  const columnDefs = [/* 你的列定义 */];
  const rowData = [/* 你的行数据 */];

  const handleGetSortedColumns = () => {
    const gridApi = gridRef.current.api;
    const sortModel = gridApi.getSortModel();
    console.log('已排序列:', sortModel);
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400 }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowData={rowData}
        sortable={true} // 开启列排序功能
      />
      <button onClick={handleGetSortedColumns}>查看当前已排序列</button>
    </div>
  );
}

这样不管你是需要主动查询，还是实时跟踪排序状态，都能完美覆盖需求啦～

内容的提问来源于stack exchange，提问作者Shardul