На этом шаге мы рассмотрим исправленную версию окраски чередующихся строк.
На примерах сортировки и разбивки на страницы мы узнали, что нельзя рассматривать различные возможности независимо друг от друга. Встраиваемые нами реализации поведения иногда могут оказывать неожиданное влияние друг на друга. По этой причине стоит повторно пересмотреть то, что было реализовано ранее, с целью анализа влияния, оказываемого на добавленную функцию фильтрации.
Чередующееся окрашивание строк
Функция выделения цветом чередующихся строк, реализованная ранее, вступает в конфликт с нашей новой функцией фильтрации. Так как после наложения фильтра выделение чередующихся строк не выполняется, строки сохраняют свою окраску, как если бы отфильтрованные строки все еще присутствовали в таблице.
Для учета отфильтрованных строк реализация окрашивания чередующихся строк должна обладать возможностью обнаруживать их. В выбре корректного набора строк для визуального оформления их чередования нам поможет псевдокласс :visible из библиотеки jQuery. При внесении соответствующих вышесказанному изменений мы можем подготовить программный код, выполняющий окрашивание чередующихся строк, к вызову из других мест в сценарии, создав для этого нестандартный тип события, как делалось, когда мы добивались корректной совместной работы функций сортировки и разбивки на страницы.
$(document).ready(function() {
$('table.striped').bind('stripe', function() {
$('tbody', this).each(function() {
$(this).find('tr:visible:not(:has(th))')
.removeClass('odd').addClass('even')
.filter(function(index) {
return (index % 6) < 3;
}).removeClass('even').addClass('odd');
});
}).trigger('stripe');
});
Теперь каждый раз, когда выполняется операция фильтрации, можно вызывать $table.trigger('stripe').
$('<div class="filter">Все</div>').click(function() {
$table.find('tbody tr').show();
$(this).addClass('active')
.siblings().removeClass('active');
$table.trigger('stripe');
}).addClass('clickable active').appendTo($filters);
Благодаря новому обработчику события и программному коду, возбуждающему его, сейчас после операции фильтрации производится корректное оформление чередования строк, как показано на рисунке 1.
Рис.1. После исправления проблемы влияния функции фильтрации на чередование окраски строк
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим развертывание и свертывание.
