JQuery. Сортировка, выделение и подсветка данных в таблице

1 июля 2012 | Автор: | Категория: JQuery и PHP

Сегодня на блоге появилась новая категория — JQuery. Первая публикация в ней будет посвящена работе с таблицами, а именно сортировке, выделению и подсветке данных.

Книги по jQuery и PHP

Для сортировки данных я использовал специальный плагин — tablesorter, его вместе с jQuery библиотекой и скриптом, в котором прописан собственный код, необходимо подключить в теге <head> HTML документа.

<script type='text/javascript' src='library/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='library/jquery.tablesorter.min.js'></script>
<script type='text/javascript' src='script.js'></script>

В файле script.js я прописал следующие функции:

$(document).ready(function() {
// Сортировка данных в таблице
$('#myTable').tablesorter(); 
});

Ждём пока загрузится страница и вызываем команду tablesorter (сортировать таблицу).

// Подсветка строки в таблице
$('#myTable tbody tr').hover(function() {
$(this).addClass('backlight');
}, function() {
$(this).removeClass('backlight');
});

Действие hover, объединяет в себе обработчики событий mouseover и mouseout. При наведении курсора на строку, будет добавляться класс backlight, когда курсор убирается, класс будет удаляться. В результате чего получается эффект подсветки.

// Выделение строк в таблице
$('#myTable tbody tr').click(function() {
$(this).toggleClass('selectlines');
});

Действие click вызывает функцию toggleClass, которая добавляет к строке таблицы указанный класс, при повторном клике класс удаляется. Получаем эффект выделения.

Посмотреть, что получилось можно здесь.

Скачать все файлы примера JQuery_Example1.zip

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

Подробно всё расписывать не стал, если кому-то интересно, все исходники можно скачать и посмотреть как что работает.

Метки: 

Для этой страницы комментарии закрыты.