Множественная сортировка

Isotope — это мощная библиотека для динамического управления сетками элементов в веб-интерфейсах. Одной из ключевых возможностей является множественная сортировка, которая позволяет упорядочивать элементы по нескольким критериям одновременно, обеспечивая гибкость и точность отображения данных.

Множественная сортировка в Isotope работает на основе массива критериев, где каждый критерий задаётся функцией или ключом данных элемента. Isotope применяет сортировку последовательно: сначала по первому критерию, затем по второму и так далее.

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name', // текстовое значение
    price: '.price parseFloat', // числовое значение
    rating: '[data-rating] parseInt' // значение из атрибута
  }
});

iso.arrange({
  sortBy: ['rating', 'price', 'name'],
  sortAscending: {
    rating: false,  // по убыванию
    price: true,    // по возрастанию
    name: true      // по алфавиту
  }
});

В примере выше элементы сначала сортируются по рейтингу (rating) в порядке убывания, затем по цене (price) по возрастанию, и только после этого — по имени (name) в алфавитном порядке.

Настройка сортировки с кастомными функциями

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

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    nameLength: function(itemElem) {
      return itemElem.querySelector('.name').textContent.length;
    },
    priceRatingRatio: function(itemElem) {
      var price = parseFloat(itemElem.querySelector('.price').textContent);
      var rating = parseInt(itemElem.getAttribute('data-rating'));
      return price / rating;
    }
  }
});

iso.arrange({
  sortBy: ['priceRatingRatio', 'nameLength'],
  sortAscending: {
    priceRatingRatio: true,
    nameLength: true
  }
});

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

Динамическое изменение порядка сортировки

Isotope позволяет менять порядок сортировки на лету, сохраняя текущую конфигурацию сетки. Для этого используется метод arrange() с новым массивом sortBy и соответствующим объектом sortAscending.

document.querySelector('#sort-button').addEventListener('click', function() {
  iso.arrange({
    sortBy: ['name', 'price'],
    sortAscending: {
      name: true,
      price: false
    }
  });
});

После вызова метода элементы плавно переставляются на основе новых критериев сортировки, без перезагрузки страницы.

Совмещение фильтрации и множественной сортировки

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

iso.arrange({
  filter: '.in-stock',
  sortBy: ['rating', 'price'],
  sortAscending: {
    rating: false,
    price: true
  }
});

В этом примере сначала выбираются только элементы с классом .in-stock, а затем они сортируются по рейтингу и цене.

Оптимизация производительности при множественной сортировке

  1. Минимизировать количество кастомных функций — функции вызываются для каждого элемента, поэтому сложные вычисления могут замедлить отображение.
  2. Использовать числовые значения для сортировки вместо строк, когда это возможно, чтобы ускорить сравнения.
  3. Кэшировать результаты вычислений внутри getSortData, если элемент не изменяется, чтобы избежать повторных вычислений при повторных перестановках.

Важные нюансы

  • Порядок элементов в массиве sortBy критичен: первый критерий имеет наивысший приоритет.
  • sortAscending можно задавать как булевое значение для всех критериев одновременно, или как объект с индивидуальными настройками для каждого критерия.
  • Кастомные функции сортировки должны возвращать сравнимое значение: число, строку или дату. Любой другой тип может привести к некорректному упорядочиванию.

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

Оглавление