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

Posted 2023-02-18

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

【英文标题】：sort multiple columns on Column header click in ag-grid

【发布时间】：2021-04-13 00:52:07

【问题描述】：

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

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

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

【参考方案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://***.com/a/57812319/6641693) 上添加侦听器来收听标题上的点击，或者只需创建您自己的标题组件，该组件将触发您想要使用列定义上的 headerComponentFramework 的任何功能：

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