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

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

1 голос
/ 10 апреля 2019

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

Есть ли способ предоставить компаратор, который зависит отгруппировать по типу столбца?

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

          });
      }
    }

1 Ответ

0 голосов
/ 10 апреля 2019

Кажется, что 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
  };

}

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

...