Недавно встала перед мной задача, сделать сортировку у таблицы, подсвечивать наведенную строчку и если есть картинка у строки, то выводить её превью. Так, так как по умолчанию к движку подключалась библиотек jQuery 1.4.2, то необходимо было найти плагин работающий именно под jQuery. После недолгих поисков, был найден плагин ui.tablesorter.js. В базовые возможности которого входила сортировка всех полей, чередование цветов строчек и возможность отключать сортировку у полей. Плагин полностью удовлетворяет требованиям к сортировке, поэтому я принял решение немного модифицировать его.
Для того, чтобы он подсвечивал строку на которую была наведена мышка, напишем небольшой обработчик, который будет выполнять следующее:
1. При наведении мышки на строку с классом even или odd в строку добавляется класс hover, в котором прописан стиль для строки.
.hover {
background-color: #cccccc !important;
}
2. Когда убираем мышку со строки, то класс удаляется, возвращая цвет в исходное состояние.
Далее надо написать обработчик открытия превью. Наиболее рациональным способом для меня стало добавление скрытого блока с картинкой в ячейку, а после наведения на строку мышки, осуществляется поиск блока и если он найден, то меняем ему css свойство на видимость.
$(".even").hover(function(){
$(".even").hover(function(){
$(this).addClass('hover');
$(this).find("td").addClass('hover');
}, function(){
$(this).removeClass('hover');
$(this).find("td").removeClass('hover');
$(this).find("div").css('display','none');
});
$(".odd").hover(function(){
$(this).addClass('hover');
$(this).find("td").addClass('hover');
$(this).find("div").css('display','block');
}, function(){
$(this).removeClass('hover');
$(this).find("td").removeClass('hover');
$(this).find("div").css('display','none');
});
Теперь этот участок кода надо добавить в плагин, в то место, которое инициализирует запуск сортировщика и выполняется каждый раз при сортировки столбцов.
Вот мы и модифицировали плагин. Единственное что хочу добавить, если цифры в ячейке записаны не в едином формате, то сортировка будет производится не корректно. Поэтому, все числа необходимо писать в едином формате. Можно было подумать, что это баг и его надо поправить, но мне показалось, что единый формат для всех чисел более правильное решение.