У меня есть классическая таблица с расширяемыми и сворачиваемыми записями, которые, если расширены, показывают несколько подзадач (как новые записи в одной родительской таблице, а не какую-нибудь дочернюю таблицу div/child). Я также использую tablesorter и абсолютно люблю его.
Проблема заключается в том, что tablesorter не хранит расширенные дочерние записи рядом с родительскими записями. Он сортирует их, как если бы они были на высшем уровне. Поэтому каждый раз, когда таблица сортируется по столбцу, дочерние строки оказываются повсюду, а не там, где я хочу их.
Кто-нибудь знает о хорошем расширении табличной структуры или конкретной конфигурации, которая позволяет tablesorter сохранять дочерние строки, сгруппированные вместе с родительской строкой, даже после сортировки? Или мне нужно отказаться от tablesorter в пользу какого-либо другого API или запустить уродливый процесс написания моего собственного виджета? Должен ли я избегать подхода, основанного на CSS, скрыть отдельные строки таблицы для представления строк сжимания?
Если вы хотите сохранить tablesorter, есть мода, который я использовал для этой цели доступный здесь
После включения его вы создадите вторую (расширяемую дочернюю) строку с классом "expand-child", а tablesorter будет знать, чтобы строка была сопряжена со своим родителем (предыдущая строка).
Собственно, что mod tablesorter, упомянутый @AdamBellaire, был добавлен в tablesorter v2.0.5. Я зарегистрировал как использовать параметр ccsChildRow в своем блоге.
Кроме того, если вам интересно, у меня есть fork of tablesorter на github, который имеет множество улучшений и полезных виджетов:)
Ужасное исправление вместо использования приведенного выше включает указание класса parentId css и childId css для родительских и дочерних строк, а затем с помощью виджета для повторной настройки. На всякий случай кто-то сталкивается с этой проблемой. Это явно не лучший код, но он работает для меня!
$("tbody tr[class^='parent']", table).each(function() {
$(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});
Я смог преодолеть это, назначив атрибуты child rel для детей и атрибуты parent rel для родителей. Затем я перебираю таблицу вначале, прячу всех детей и заново подключаю их после завершения сортировки. Я также использую функцию переключения для отображения детей. Вот мое решение:
function lfDisplayProductInformation(id){
if($('[rel="child-${id}"]').attr("hidden") === 'hidden'){
$('[rel="child-${id}"]').removeAttr('hidden')
}
else if(!$('[rel="child-${id}').attr("hidden")){
$('[rel="child-${id}"]').attr("hidden", true)
}
}
$(".tablesort")
.tablesorter({
theme: 'blue',
showProcessing : true
})
// assign the sortStart event
.bind("sortStart",function(e, t) {
$("tr[rel^='parent']").each(function() {
var parentRow = $(this);
var tag = (parentRow.attr('rel')).split("-")[1];
var childRow = $('tr[rel="child-${tag}"]')
if(!childRow.attr("hidden")){
childRow.attr("hidden", true)
}
});
})
.bind("sortEnd",function(e, t) {
$("tr[rel^='parent']").each(function() {
var parentRow = $(this);
var tag = (parentRow.attr('rel')).split("-")[1];
var childRow = $('tr[rel="child-${tag}"]')
childRow
parentRow.after(childRow);
});
})