На этом шаге мы рассмотрим алгоритм выполнения этого действия.
Когда большой объем данных делится на разделы, может быть полезно организовать сокрытие информации, которая в данный момент не представляет интереса для пользователя. В нашей таблице с заголовками книг строки группируются по годам; свертывание, или сокрытие книг за тот или иной год обеспечит удобный способ получить общее представление обо всех данных в таблице без необходимости слишком долго перемещаться вверх и вниз по таблице.
Чтобы сделать разделы таблицы свертываемыми, сначала необходимо создать элемент страницы, который будет использоваться для доступа к этой возможности. Обычно в качестве интерфейсного элемента, обозначающего разделы, допускающие сворачивание, используется знак минус, а для обозначения разделов, допускающих возможность разворачивания, используется знак плюс. Следуя стандартному приему прогрессивного улучшения, мы будем вставлять ярлык с помощью 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);
}
});
});
});
В случае выполнения щелчка мышью происходит следующее:
- Добавляется или удаляется класс collapsed в элементе <tbody>, чтобы запомнить текущее состояние раздела таблицы.
- Обнаруживаются все строки раздела, не содержащие заголовков, которые затем отображаются или скрываются с использованием эффекта плавного перехода от одного состояния к другому.
- Переключается текущее состояние ярлыка за счет изменения значений атрибутов src и alt, чтобы отразить тип действия, которое будет выполняться при очередном щелчке.
Теперь после щелчка на ярлыке с подсказкой Cвернуть этот раздел в строке с текстом 2012 таблица не будет отображать записи этого года.
Рис.1. Возможно сворачивание разделов таблицы
Полный текст этого примера можно взять здесь.Заголовки никуда не исчезают; они просто становятся невидимыми и остаются таковыми, пока мы не щелкнем на ярлыке с подсказкой Развернуть этот раздел, появляющейся теперь в данной строке.
Примечание. Применение анимационных эффектов к строкам таблицы представляет собой определенную проблему, так как в браузерах используются различные значения (table-row и block) для свойства display, управляющего их видимостью. Методы .hide() и .show() без анимационных эффектов (комментарии в примере) всегда можно безопасно использовать для управления видимостью строк таблицы. Если анимационный эффект является желательным, можно также применять методы .fadeIn() и .fadeOut().
На следующем шаге мы рассмотрим фильтрацию.
