Номер сортировки Datagrid - нулевой последний

Есть ли способ настроить сортировку в столбце таблицы данных, который является числовым, но может быть нулевым, чтобы, если пользователь сортирует список, он всегда отображал нулевой последний, т.е. asc будет 1,2,3, null desc будет 3,2 ,1,нуль

Полезно, так как многие строки будут иметь нулевое значение, и если щелкнуть сортировку, пользователь сосредоточится на просмотре информации, которая отсортирована, как указано выше.


person GaryHyland    schedule 20.09.2019    source источник


Ответы (1)


Столбцы могут иметь пользовательскую функцию сортировки, предоставляемую приложением.

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

Сначала определите CustomComparator для использования приложением:

import {ClrDatagridComparatorInterface} from "@clr/angular";

class CustomComparator implements ClrDatagridComparatorInterface<any> {
    compare(a: any, b: any) {
      if (a.key && b.key) {
        return a.key - b.key;
      } else {
        return null;
      }
    }
}

Затем объявите компаратор как общедоступную сущность в компоненте с сеткой данных.

public customComparator = new CustomComparator();

Наконец, обновите шаблон, чтобы объявить использование пользовательского компаратора в столбце, который в нем нуждается:

<clr-dg-column [clrDgField]="'key'"
  [clrDgSortBy]="customComparator">
    Key
</clr-dg-column>

Вот ссылка на stackblitz с имплантированным настраиваемым компаратором, который всегда возвращает нулевые элементы последними. https://stackblitz.com/edit/so-58020609-custom-sorting

person hippeelee    schedule 20.09.2019
comment
Хм .. Пробовал это, но я возвращал 0 вместо нуля, когда оба ключа были нулевыми. Только что попробовал это в моем проекте, но не работает. Возможно, потому что я все еще использую Angular 7.2.5 и clr 1.1.0. Может пора перейти на v8 и clr 2... Спасибо за помощь. Будет выполнено обновление и повторная попытка в течение следующих нескольких дней. - person GaryHyland; 23.09.2019
comment
Единственный способ заставить его работать вообще - изменить компаратор, чтобы он возвращал только a.key - b.key, т.е. не возвращает ноль. В этом случае sort asc имеет нули вверху, а desc — нули внизу. Как сказал, я попытаюсь обновить повторный тест - person GaryHyland; 23.09.2019
comment
Наконец-то вернулся к этому. Создали новый StackBlitz сверху, который демонстрирует проблему. Вышеупомянутое работает только из-за начального порядка данных, т.е. нулей в конце. Если вы поместите нули в начале, вы увидите, что они НЕ перемещаются и не сортируются. stackblitz.com/edit/so-58020609-custom-sorting-yyoepa - person GaryHyland; 02.04.2020
comment
Hippeelee @hippeelee интересно, видели ли вы это выше. Мой обновленный stackblitz показывает проблему с сортировкой сетки данных, которую я не знаю, как решить в настоящее время. Спасибо - person GaryHyland; 17.04.2020