jQuery Isotope - сортировка данных по группам

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

Функции сортировки/фильтрации Isotope, похоже, не предназначены для этой цели, поэтому мой первоначальный подход состоял в том, чтобы переупорядочить DOM с помощью .insertAfter, а затем запустить «reLayout».

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

(См.: http://jsfiddle.net/owenhoskins/r7MgY/10896/)

Есть ли способ обновить Isotope на основе структуры DOM без повторной инициализации?

Или возможно ли взаимодействовать с функциями сортировки/фильтрации для достижения этой цели?

Заранее спасибо, Оуэн


jquery jquery-isotope
person Owen Hoskins    schedule 02.12.2011    source источник
comment
Я уверен, что мы можем работать с более сложной системой сортировки, но вам нужно немного лучше описать, каким должен быть конечный результат. в вашем примере вы хотите, чтобы элементы до нажатия оставались несортированными? (если они не одного цвета?) после пары кликов вся таблица сгруппирована по типу.. это то, что вы хотите (точно так же, как в вашей демонстрации)?   -  person Gabriele Petrioli    schedule 28.04.2012
comment
Спасибо за комментарий. По сути, я хочу переместить элементы группы вокруг «щелкнутого» элемента этой группы, оставив при этом позиции элементов других групп нетронутыми. Как и в моей демонстрации, конечным результатом будет вся таблица, сгруппированная по типу.   -  person Owen Hoskins    schedule 06.06.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вместо этого попробуйте это (разветвленная скрипка). Использование метода prepend в документации работает для меня и не не прыгай.

person hejhi    schedule 06.06.2012
comment
Спасибо за ответ, вилка работает так, как вы описали, но я пытался сохранить позицию выбранного элемента при перемещении оставшихся элементов группы после элемента (путем изменения DOM с помощью .insertAfter) - person Owen Hoskins; 06.06.2012
comment
Разве это уже не делается? Я сделал щелкнутый элемент синим, чтобы он был более очевидным - jsfiddle.net/wkMUr/3 позиция остается то же самое, в то время как все остальные члены группы добавляют после него: Или, может быть, я все еще не совсем понимаю, что вы ищете? - person hejhi; 06.06.2012
comment
Вы правы...! Как-то пропустил это, думаю, это был просто reloadItems, а не reLayout и т. Д., Спасибо за помощь! - person Owen Hoskins; 11.06.2012

arrow_upward
1
arrow_downward

Не могли бы вы использовать другой плагин для достижения этой цели? Взгляните на: Quick Sand Его функциональность заключается в замене набора элементов с другой, гораздо более простой, чем изотопная, на мой взгляд.

Вот пример, похожий на результат, который вы хотите получить: Пример быстрой сортировки

person gahius    schedule 27.04.2012
comment
Похоже, Quick Sand не показывает их все и не группирует. Он избавляется от тех, кто не является частью группы. И я не использовал Quick Sand, но похоже, что количество JS в два или более раз превышает количество JS по сравнению с Isotope. - person tazboy; 22.12.2016