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

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

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',          // стандартная сортировка по тексту
    price: function(itemElem) { 
      return parseFloat($(itemElem).find('.price').text().replace('$', '')); 
    },
    rating: function(itemElem) {
      return parseInt($(itemElem).attr('data-rating'));
    }
  }
});

В этом примере:

  • name извлекается через селектор .name.
  • price вычисляется через функцию, которая преобразует текст в число.
  • rating берется из атрибута data-rating.

Создание сложных критериев сортировки

Функции сортировки могут быть любого уровня сложности, включая вычисления на основе нескольких элементов внутри одного grid-item. Например, сортировка по сумме нескольких параметров:

getSortData: {
  popularityScore: function(itemElem) {
    var views = parseInt($(itemElem).find('.views').text());
    var likes = parseInt($(itemElem).find('.likes').text());
    return views + likes * 2; // комбинированный показатель
  }
}

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

Обратная сортировка

Для сортировки в обратном порядке используется свойство sortAscending. Оно может быть массовым для всех критериев или индивидуальным для каждой функции:

$grid.isotope({
  getSortData: {
    price: '.price parseFloat',
    rating: '[data-rating] parseInt'
  },
  sortBy: 'price',
  sortAscending: {
    price: true,   // по возрастанию
    rating: false  // по убыванию
  }
});

Сортировка на основе сложных условий

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

getSortData: {
  combined: function(itemElem) {
    var category = $(itemElem).find('.category').text().toLowerCase();
    var score = parseFloat($(itemElem).find('.score').text());
    return category + '-' + score.toString().padStart(5, '0');
  }
}

Такой метод объединяет текст и число, обеспечивая приоритет текстовой сортировки, а затем числовой.

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

Isotope позволяет менять критерий сортировки на лету, без пересоздания сетки:

$grid.isotope({ sortBy: 'rating' });
$grid.isotope({ sortBy: 'price' });

Можно также использовать пользовательские функции в комбинации с кнопками управления сортировкой:

$('.sort-button').on('click', function() {
  var sortValue = $(this).attr('data-sort-by');
  $grid.isotope({ sortBy: sortValue });
});

Производительность пользовательских функций

Функции сортировки вызываются для каждого элемента при каждой перестановке. Чтобы не снижать производительность на больших сетках:

  • кэшировать вычисленные значения, если они не меняются часто;
  • использовать числовые значения вместо строк для быстрых сравнений;
  • минимизировать DOM-операции внутри функции.
getSortData: {
  cachedPrice: function(itemElem) {
    var $item = $(itemElem);
    if (!$item.data('cachedPrice')) {
      $item.data('cachedPrice', parseFloat($item.find('.price').text().replace('$','')));
    }
    return $item.data('cachedPrice');
  }
}

Комбинированные и условные сортировки

Можно реализовать несколько уровней сортировки, используя массивы критериев:

$grid.isotope({
  sortBy: ['category', 'price'],
  getSortData: {
    category: '.category',
    price: function(itemElem) {
      return parseFloat($(itemElem).find('.price').text());
    }
  }
});

Элементы сначала сортируются по категории, а внутри каждой категории — по цене.

Использование внешних данных

Функции могут опираться на внешние источники данных, например, результаты AJAX-запросов:

getSortData: {
  externalScore: function(itemElem) {
    var id = $(itemElem).data('id');
    return externalScores[id] || 0;
  }
}

Это позволяет интегрировать динамическую сортировку на основе пользовательских предпочтений, статистики или рейтингов.

Резюме подходов

  • Функции сортировки предоставляют полный контроль над порядком элементов.
  • Можно комбинировать текст, числа и атрибуты для сложных метрик.
  • Использование sortAscending и массивов sortBy позволяет строить многоуровневые схемы сортировки.
  • Для оптимизации крупных сеток рекомендуется кэшировать вычисления и минимизировать манипуляции с DOM.

Эти методы делают Isotope гибким инструментом для любых задач визуальной организации контента и позволяют создавать уникальные пользовательские сценарии сортировки.

Оглавление