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

    На этом шаге мы рассмотрим алгоритм выполнения этого действия.

    Когда большой объем данных делится на разделы, может быть полезно организовать сокрытие информации, которая в данный момент не представляет интереса для пользователя. В нашей таблице с заголовками книг строки группируются по годам; свертывание, или сокрытие книг за тот или иной год обеспечит удобный способ получить общее представление обо всех данных в таблице без необходимости слишком долго перемещаться вверх и вниз по таблице.

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

 $(document).ready(function() {
   var collapseIcon = 'images/bullet_toggle_minus.png';
   var collapseText = 'Свернуть этот раздел';
   var expandIcon = 'images/bullet_toggle_plus.png';
   var expandText = 'Развернуть этот раздел';
   $('table.collapsible tbody').each(function() {
     var $section = $(this);
     $('<img />').attr('src', collapseIcon)
       .attr('alt', collapseText)
       .prependTo($section.find('th'));
   });
 });

    В начале функции мы определили местоположение ярлыков, а также их альтернативное текстовое представление в виде переменных. Это упростит возможность обращения к ним и изменения в случае необходимости. Вставку изображений мы реализовали в виде цикла .each(), что очень удобно, так как позднее нам необходимо будет иметь возможность ссылаться на вмещающий элемент <tbody>; он будет доступен через переменную $section, которая определяется здесь же.

    Затем необходимо добавить к ярлыкам обработчики, которые будут обеспечивать сворачивание и разворачивание строк. Добавление класса clickable обеспечит необходимую обратную связь с пользователем, а класс collapsed в элементе <tbody> поможет определить, видимы ли строки текущего раздела в настоящий момент или нет.

 $(document).ready(function() {
   var collapseIcon = 'images/bullet_toggle_minus.png';
   var collapseText = 'Свернуть этот раздел';
   var expandIcon = 'images/bullet_toggle_plus.png';
   var expandText = 'Развернуть этот раздел';
   $('table.collapsible tbody').each(function() {
     var $section = $(this);
     $('<img />').attr('src', collapseIcon)
       .attr('alt', collapseText)
       .prependTo($section.find('th'))
       .addClass('clickable')
       .click(function() {
         if ($section.is('.collapsed')) {
           $section.removeClass('collapsed')
             .find('tr:not(:has(th))').fadeIn('slow'); //show();
           $(this).attr('src', collapseIcon)
             .attr('alt', collapseText);
         }
         else {
           $section.addClass('collapsed')
             .find('tr:not(:has(th))').fadeOut('slow'); //hide(); 
           $(this).attr('src', expandIcon)
             .attr('alt', expandText);
         }
       });
   });
 });

    В случае выполнения щелчка мышью происходит следующее:

  1. Добавляется или удаляется класс collapsed в элементе <tbody>, чтобы запомнить текущее состояние раздела таблицы.
  2. Обнаруживаются все строки раздела, не содержащие заголовков, которые затем отображаются или скрываются с использованием эффекта плавного перехода от одного состояния к другому.
  3. Переключается текущее состояние ярлыка за счет изменения значений атрибутов src и alt, чтобы отразить тип действия, которое будет выполняться при очередном щелчке.

    Теперь после щелчка на ярлыке с подсказкой Cвернуть этот раздел в строке с текстом 2012 таблица не будет отображать записи этого года.

Рис.1. Возможно сворачивание разделов таблицы

Полный текст этого примера можно взять здесь.

    Заголовки никуда не исчезают; они просто становятся невидимыми и остаются таковыми, пока мы не щелкнем на ярлыке с подсказкой Развернуть этот раздел, появляющейся теперь в данной строке.


   Примечание. Применение анимационных эффектов к строкам таблицы представляет собой определенную проблему, так как в браузерах используются различные значения (table-row и block) для свойства display, управляющего их видимостью. Методы .hide() и .show() без анимационных эффектов (комментарии в примере) всегда можно безопасно использовать для управления видимостью строк таблицы. Если анимационный эффект является желательным, можно также применять методы .fadeIn() и .fadeOut().

    На следующем шаге мы рассмотрим фильтрацию.




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