修改在 ag-grid 上排序的内容

Question

TL;DR：如何在运行时更改要排序的字段（假设：单元格使用多个值）

目前，我正在 Angular 中创建一个 ag-grid，其中包含多个数据点用于给定单元格 (valueGetter) 的列。 鉴于此，我希望允许用户根据他们想要的任何字段进行排序。

目前，我能够有一种解决方法，我可以覆盖列菜单以显示给定列的特定字段（它还有改进的余地，以便对所有列更通用，但这是一个不同的主题）。我为此提供了一个函数，它可以更新列定义，替换原来的比较器，并刷新列定义。

这（更新列定义）并不理想，因为它会关闭当前在侧栏中打开的过滤器。所以我的问题是：有没有更好的方法来更改在运行时为给定列排序的内容（不更新列定义）？ 非常小众的用例，但这是我提到的相关代码以上：

覆盖菜单项：

 getMainMenuItems(params) {
    const defaultMenuItems = [];
    switch(params.column.getId()) {
      case 'product':
        defaultMenuItems.push(
          {
            name: 'Sort By Customer',
            action: () => this.updateComparatorOnColDef('customer', 'issuer'),
            checked: params.column.userProvidedColDef.sortBy === 'customer'
          },
          {
            name: 'Sort By Product Type',
            action: () => this.updateComparatorOnColDef('product', 'productType'),
            checked: params.column.userProvidedColDef.sortBy === 'productType'
          },
          {
            name: 'Sort By ProductID',
            action: () => this.updateComparatorOnColDef('product', 'productId'),
            checked: params.column.userProvidedColDef.sortBy === 'productId'
          },
        );
        return defaultMenuItems;
      default:
        return params.defaultItems;
    }
  }

更新列定义

 updateComparatorOnColDef(colId: string, dataProperty: string) {
const newColDefs = _.cloneDeep(this.columnDefs);
const colDef = newColDefs.find(x => x.colId === colId);
if(colDef?.comparator) {
  colDef.comparator = (valueA, valueB, nodeA, nodeB, isInverted) => {
    if(typeof valueB[dataProperty] === 'string' && typeof valueA[dataProperty] === 'string') {
      return ((valueA[dataProperty].toLowerCase()) > (valueB[dataProperty].toLowerCase())) ? 1 : -1;
    } else {
      return (valueA[dataProperty] > valueB[dataProperty]) ? 1 : -1;
    }
  };
  colDef.sortBy = dataProperty; // used to display the check where appropriate on the column menu
  this.gridApi.setColumnDefs(newColDefs);
}

}

编辑： 侧边栏重新打开列定义更新后之前打开的过滤器：

updateComparatorOnColDef(colId: string, dataProperty: string) {
// todo: pass in config param to tell how to compare or do logic to infer types (for misc. values, like % ranges(ex: 12% - 20%))
const openFilters = [];
const filtersToolPanel = this.gridApi.getToolPanelInstance('filters');
for(const filter of filtersToolPanel.filtersToolPanelListPanel.filterGroupComps) {
  if(filter.isExpanded()) {
    openFilters.push(filter.getFilterGroupId());
  }
}
const newColDefs = _.cloneDeep(this.columnDefs);
const colDef = newColDefs.find(x => x.colId === colId);
if(colDef?.comparator) {
  colDef.comparator = this.generateComparator(dataProperty);
  colDef.sortBy = dataProperty;

  this.gridApi.setColumnDefs(newColDefs);
  this.gridApi.getToolPanelInstance('filters').expandFilters(openFilters);
}

}

Answer 1

如果我正确理解您的问题，您有一个 valueGetter 可以更改列的值，并且这些值应该以不同的方式排序。我建议实现comparator 并在其中添加逻辑以根据节点中的值进行排序。请参阅Custom Sorting 上的文档。