Ag-grid: GroupByColum Sort не работает для числовых значений, он обеспечивает только строковую сортировку

В моей ag-сетке, когда я делаю группировку по столбцу и нажимаю, чтобы отсортировать группы, они сортируются в алфавитном порядке даже для числовых значений.

Есть ли способ предоставить компаратор, который зависит от типа столбца group by (row group)?

Чтобы воспроизвести проблему: 1. В панели ниже попробуйте сгруппировать по возрастной строке 2. Сортировать по Группе с помощью asc или Desc sort 3. Группы сортируются по алфавиту, а не по значениям (возрастной порядок, когда sort 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;

          });
      }
    }

angular ag-grid ag-grid-angular
person Wael Mkaddem    schedule 09.04.2019    source источник
comment
Получили ли вы какое-нибудь решение   -  person Hasini    schedule 22.05.2021

Ответы (2)


arrow_upward
3
arrow_downward

Похоже, что ag-Grid использует определение сортировки JavaScript по умолчанию, поэтому оно может не работать для чисел или любых других типов данных. Вам нужно будет передать ему пользовательскую функцию компаратора в свойство 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
  };

}

Я раздвоил вашу демонстрацию и добавил свои изменения здесь.

person wentjun    schedule 10.04.2019
comment
Спасибо за ответ, но это не то, что я объяснил. Сортировка по возрасту уже работает, но когда вы группируете по возрасту и сортируете группу, это не работает! - person Wael Mkaddem; 10.04.2019

arrow_upward
1
arrow_downward

Сегодня у меня была такая же проблема. Я обнаружил, что вы можете создать собственный компаратор сортировки для групп строк из документации в этой статье:

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

person Vampiro    schedule 02.02.2021