对列标题上的多个列进行排序，单击 ag-grid

Question

在文档中，排序 API 即列 API 方法“applyColumnState”用于在单击外部按钮时对多个列进行排序

但是我们可以在单击列标题时对多个列进行排序吗？

例如，在 A 列标题单元格上单击我希望 A 列降序排序，B 列升序排序。这可能吗？

Answer 1

来自文档：https://www.ag-grid.com/documentation/javascript/row-sorting/#sorting-api

您可以使用 ColumnState API 手动对多个列进行逐一排序：

gridOptions.columnApi.applyColumnState({
    state: [
      { colId: 'country', sort: 'asc', sortIndex: 0 },
      { colId: 'sport', sort: 'asc', sortIndex: 1 },
    ],
    defaultState: { sort: null },
  });

如果你想点击一个标题并对另一个标题进行排序，你可以禁用对有问题的标题的排序，监听它的点击并执行上面的applyColumnState手动排序。

您可以通过在 .ag-header-cell 类 (https://stackoverflow.com/a/57812319/6641693) 上添加侦听器来收听标题上的点击，或者只需创建您自己的标题组件，该组件将触发您想要使用列定义上的 headerComponentFramework 的任何功能：

headerComponentFramework: (params) =>{
 return (
  <div>
   .....
  </div>
 )
}