На этом шаге мы рассмотрим алгоритм выполнения этого действия.
Когда большой объем данных делится на разделы, может быть полезно организовать сокрытие информации, которая в данный момент не представляет интереса для пользователя. В нашей таблице с заголовками книг строки группируются по годам; свертывание, или сокрытие книг за тот или иной год обеспечит удобный способ получить общее представление обо всех данных в таблице без необходимости слишком долго перемещаться вверх и вниз по таблице.
Чтобы сделать разделы таблицы свертываемыми, сначала необходимо создать элемент страницы, который будет использоваться для доступа к этой возможности. Обычно в качестве интерфейсного элемента, обозначающего разделы, допускающие сворачивание, используется знак минус, а для обозначения разделов, допускающих возможность разворачивания, используется знак плюс. Следуя стандартному приему прогрессивного улучшения, мы будем вставлять ярлык с помощью 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); } }); }); });
В случае выполнения щелчка мышью происходит следующее:
Теперь после щелчка на ярлыке с подсказкой Cвернуть этот раздел в строке с текстом 2012 таблица не будет отображать записи этого года.
Рис.1. Возможно сворачивание разделов таблицы
Полный текст этого примера можно взять здесь.Заголовки никуда не исчезают; они просто становятся невидимыми и остаются таковыми, пока мы не щелкнем на ярлыке с подсказкой Развернуть этот раздел, появляющейся теперь в данной строке.
На следующем шаге мы рассмотрим фильтрацию.