angular - ag-grid : GroupByColum Sort not working for numeric values, 只提供字符串排序

Question

在我的 ag-grid 中，当我按列分组并单击以对分组进行排序时，即使对于数值也是如此。

有没有办法提供一个依赖于按(行组)列类型分组的比较器？

重现问题:1.在punker bellow中，尝试按年龄行分组2. 按 Group 排序，使用 asc 或 Desc 排序3. 组是按字母排序而不是按值排序(排序描述为时的年龄顺序:15,16,17,18,19,2,20,200,21,22....)!

链接:https://plnkr.co/edit/FjJOYQgsz46KDQfoNCQF?p=preview

    export class AppComponent {
      private gridApi;
      private gridColumnApi;

      private columnDefs;
      private defaultColDef;
      private sideBar;
      private frameworkComponents;
      private rowData: [];

      constructor(private http: HttpClient) {
        this.columnDefs = [
          {
            field: "athlete",
            width: 150,
            filter: "agTextColumnFilter",
            sortable: true
          },
          {
            field: "age",
            width: 90,
            sortable: true
          },
          {
            field: "country",
            width: 120,
            sortable: true
          },
          {
            field: "year",
            width: 90,
            sortable: true
          },
          {
            field: "date",
            width: 110
          },
          {
            field: "gold",
            width: 100,
            filter: false
          },
          {
            field: "silver",
            width: 100,
            filter: false
          },
          {
            field: "bronze",
            width: 100,
            filter: false
          },
          {
            field: "total",
            width: 100,
            filter: false
          }
        ];
        this.defaultColDef = { filter: true, sortable: true, enableRowGroup : true };
        this.sideBar = {
          toolPanels: [
            {
              id: "columns",
              labelDefault: "Columns",
              labelKey: "columns",
              iconKey: "columns",
              toolPanel: "agColumnsToolPanel"
            },
            {
              id: "filters",
              labelDefault: "Filters",
              labelKey: "filters",
              iconKey: "filter",
              toolPanel: "agFiltersToolPanel"
            },
            {
              id: "customStats",
              labelDefault: "Custom Stats",
              labelKey: "customStats",
              iconKey: "custom-stats",
              toolPanel: "customStatsToolPanel"
            }
          ],
          defaultToolPanel: "customStats"
        };
        this.frameworkComponents = { customStatsToolPanel: CustomStatsToolPanel };
      }

      onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;

        this.http
          .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
          .subscribe(data => {
            data[10].age = 200;
            data[12].age = 2;
            this.rowData = data;

          });
      }
    }

Answer 1

ag-Grid 似乎使用默认的 JavaScript 排序定义，这就是它可能不适用于数字或任何其他数据类型的原因。你必须将它传递给 custom comparator function到列定义中的 comparator 属性。

我假设您只需要为年龄列使用该函数。

在下面的代码中，我添加了 numberSort，这是年龄列的比较函数。

constructor(private http: HttpClient) {
  const numberSort = (num1: number, num2: number) => {
    return num1 - num2;
  };
  this.columnDefs = [{
      field: "athlete",
      width: 150,
      filter: "agTextColumnFilter",
      sortable: true,
    },
    {
      field: "age",
      width: 90,
      sortable: true,
      comparator: numberSort
    },
    .
    .
    .
    // other column defs
  ];
  this.defaultColDef = {
    filter: true,
    sortable: true,
    enableRowGroup: true
  };

}

我已经 fork 了你的演示并添加了我对 here 的更改.