Перейти к основному содержимому

Сортировка столбцов

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

Есть два способа включить сортировку в гриде:

  1. Щелчок по заголовку столбца, для которого включён атрибут sort;
  2. Использование вызова метода sort, который может быть вызван событием или действием, например, нажатием кнопки или при загрузке страницы.
заметка

Имейте в виду, что Gantt сортирует задачи только по фактическим значениям данных и не сортирует значения, созданные с помощью атрибута template столбца.

Сортировка по клику на заголовке​

При щелчке по заголовку Gantt отображает визуальный индикатор, который показывает, какой столбец отсортирован в данный момент и в каком порядке (по возрастанию или убыванию). Каждый последующий клик по тому же заголовку меняет направление сортировки.

gantt_sorting

Чтобы включить сортировку в Gantt, установите свойство sort в true:

gantt.config.sort = true; 
gantt.init("gantt_here");

Built-in sorting

Программная сортировка​

Чтобы отсортировать грид в ответ на определённое событие или действие (например, нажатие кнопки или загрузку страницы), используйте метод sort.

Сортировка по нажатию кнопки

<input type='button' value='Sort by task name' onclick='gantt.sort("text", true);'/>

<script type="text/javascript" charSet="utf-8">
    gantt.init("gantt_here"); 
    gantt.parse(tasks);
</script>

Using sorting methods

Пользовательские функции сортировки​

Можно применить пользовательскую функцию сортировки, передав её имя в качестве первого (и единственного) параметра методу sort.

Эта функция вызывается для каждой пары соседних значений и должна возвращать 1, -1 или 0:

  • 1 - первый объект в паре должен идти перед вторым;
  • -1 - второй объект должен идти перед первым;
  • 0 - порядок этих объектов не меняется.

Использование пользовательской функции для сортировки Gantt

<input type='button' value='Sort by the number of holders' 
       onclick='sortByHolders(direction)'/>

<script type="text/javascript" charSet="utf-8">
    var direction = false;

    function sortByHolders(direction1){
        direction = !direction;
        gantt.sort(sortHolders);
    };
    function sortHolders(a,b){
         a = a.users.length;
         b = b.users.length;

         if (direction){
            return a>b?1:(a<b?-1:0);
         } else {
            return a>b?-1:(a<b?1:0);
         }
    };
</script>

Custom sorting function

Сортировка по столбцам в гриде​

Можно определить индивидуальные правила сортировки для каждого столбца. Вот три распространённых способа настройки сортировки по столбцам:

  1. Отключить сортировку для столбца, установив sort в false
gantt.config.columns[1].sort = false;
  1. Сортировать столбец с помощью пользовательской функции, установив sort в эту функцию
gantt.config.columns[1].sort = function(a,b){
    return custom_function(a,b);
};

Эта пользовательская функция получает два объекта задачи (a и b) и возвращает 1, -1 или 0:

  • 1 - первый объект должен идти перед вторым;
  • -1 - второй объект должен идти перед первым;
  • 0 - порядок остаётся прежним.
  1. Сортировать столбец по значениям другого поля задачи, установив sort в имя этого поля
gantt.config.columns[1].sort = 'other_field';