Шаг 149.
Библиотека jQuery. Работа с таблицами. Изменение внешнего вида таблицы. Фильтрация. Развертывание и свертывание

    На этом шаге мы рассмотрим доработку свертывания и развертывания разделов с учетом фильтра.

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

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

    Один из способов исправить последнюю ситуацию состоит в том, чтобы изменить способ отображения и сокрытия строк. Если для сокрытия строк использовать класс CSS, тогда нам не потребуется явно вызывать методы .hide() и .show(). Заменив в реализации свертывания разделов вызов метода .hide() на вызов .addClass('filtered') и вызов метода .show() на вызов .removeClass('filtered') и добавив определение класса CSS, мы сможем обеспечить корректное сокрытие и отображение строк. При удалении класса из строк в свернутом разделе они больше не будут отображаться по ошибке.

    Добавление нового класса filtered поможет нам и в решении обратной проблемы. Мы можем реализовать проверку отфильтрованных строк при развертывании раздела, пропуская их, вместо того чтобы отображать. Проверка наличия данного класса - это лишь вопрос добавления :not(.filtered) в селектор, используемый реализацией развертывания раздела.

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

    На следующем шаге мы приведем окончательную версию приложения.




Предыдущий шаг Содержание Следующий шаг