ag-Grid - как принудительно настроить сортировку после добавления или изменения данных

Я пытаюсь использовать настраиваемую сортировку столбца в ag-Grid в моем Ionic 4/Angular 8 приложении.

У меня есть образец приложения здесь или на Stackblitz Я не могу запустить его на Stackblitz, но он определенно работает локально,

В любом случае следует отметить несколько моментов: я хочу, чтобы сетка работала в виртуальном режиме (например, может иметь 1000 строк данных), а также я установил this.gridOptions.immutableData = true; для обработки моих данных из ng/rx.

Также я использую компонент в качестве шаблона ячейки, но я думаю, что мы можем проигнорировать это здесь (используя существующий пример)

Я хочу, чтобы строки были отсортированы, поэтому вызывая мою dateComparator функцию,

  • Когда я впервые загружаю данные
  • Если у меня есть какие-либо добавленные или обновленные данные

Чтобы имитировать новые данные, поступающие с сервера, у меня есть кнопка добавления, которая вызывает метод add.

Я добавил comparator в столбец ...

        public ngAfterViewInit(): void {                
            const self = this;
            this.gridOptions.immutableData = true;
            this.gridOptions.animateRows = true
            this.gridOptions.api.setColumnDefs([
            {
                    headerName: 'myheader',
                    comparator: self.dateComparator,
                    sortable: true,
                    field: 'equipment',
                    cellStyle: { padding: 0 },        
                    cellRendererFramework: TemplateRendererComponent,              
                    cellRendererParams: {
                        ngTemplate: this.itemCard
                    },        
                },
            ]);

            this.setData();
            }

    private dateComparator(valueA, valueB, nodeA, nodeB, isInverted): number {
       console.log('sorting');
       return 1;
     }

Однако, когда я загружаю сетку или вызываю вышеуказанный метод добавления, мой dateComparator не вызывается. Он вызывается, только если я щелкаю заголовок столбца.

Я попытался позвонить this.gridOptions.api.redrawRows(), но это не привело к сортировке. Я не вижу другой очевидной sort функции для вызова.

У меня вопрос: как я могу применить эту сортировку автоматически, не щелкая заголовок столбца (т.е. когда я загружаю или обновляю свои данные)?


angular ag-grid ag-grid-angular
person peterc    schedule 31.05.2020    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Чтобы отсортировать столбец по умолчанию, вы должны указать атрибут сортировки в colDef -

sort: 'desc', // asc or desc

Вы также можете сделать это после инициализации сетки с помощью api сортировки -

var sort = [
  {
    colId: 'country',
    sort: 'asc',
  },
  {
    colId: 'sport',
    sort: 'asc',
  },
];
this.gridApi.setSortModel(sort); // provide sort model here

Теперь, когда ваши данные обновлены и вам нужно сообщить сетке, чтобы поддерживать сортировку в соответствии с вашим настраиваемым компаратором, вам нужно вызвать - onSortChanged()

Согласно документам-

onSortChanged ()
Заставляет сетку действовать так, как если бы сортировка была изменена. Полезно, если вы обновляете некоторые значения и хотите, чтобы сетка переупорядочивала их в соответствии с новыми значениями.

Пример применения модели сортировки здесь

person Pratik Bhat    schedule 31.05.2020
comment
большое спасибо! Казалось, что просто добавление sort: 'asc' заставило мой метод comparator теперь вызываться как при первом добавлении данных, так и при добавлении новых данных. В моем простом тесте мне даже не нужно было вызывать onSortChanged(), но я буду иметь это в виду, если, когда я начну более сложные обновления, я не увижу, что сортировка работает сама по себе. - person peterc; 01.06.2020