Question

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

有没有一种方法可以提供一种比较器，该比较器取决于（行组）列类型？

要重现此问题： 1.在朋克波纹管中，尝试按“年龄”行分组 2.使用asc或Desc排序按组排序 3.组是按字母排序而不是按值排序（排序desc为：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

我今天遇到了同样的问题。我发现您可以从本文的文档中为行组创建自定义排序比较器：

https://www.ag-grid.com/documentation/angular/grouping/

在本文档中，他们提到了 gridOptions.autoGroupColumnDef.comparator。我修改了他们的示例比较器，使其也适用于数值。它最终看起来像：

autoGroupColumnDef = {
  comparator: function (valueA, valueB) {
    if (valueA == null) return -1;
    if (valueB == null) return 1;
    if (!valueA.substring || !valueB.substring) return valueA - valueB;
    if (valueA.length < 1 || valueB.length < 1) return valueA - valueB;
    if (!isNaN(valueA) && !isNaN(valueB)) {
      // values will come in as strings
      return Number(valueA) - Number(valueB);
    }
    return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
  }
}

我已经修改了您的 plnkr 以添加此内容，您可以看到行组正确排序。

https://plnkr.co/edit/OnB2pd2qCLKj5DxU?preview

Answer 2

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

我假设您只需要对age列使用该功能。

在下面的代码中，我添加了numberSort，它是age列的比较器函数。

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
  };

}

我已经分叉了您的演示，并在here上添加了我的更改。

Ag-grid：GroupByColum Sort不适用于数值，它仅提供字符串排序

2 个答案: