Получение jQuery tablesorter для работы со скрытыми / сгруппированными строками таблицы
У меня есть классическая таблица с расширяемыми и сворачиваемыми записями, которые при расширении показывают несколько подзаписей (как новые записи в той же родительской таблице, а не какую-то дочернюю таблицу div / child). Я также использую Tableorter и мне это очень нравится.
Проблема в том, что tableorter не хранит расширенные дочерние записи рядом с родительскими записями. Он сортирует их, как если бы они были на высшем уровне. Таким образом, каждый раз, когда таблица сортируется по столбцу, дочерние строки оказываются повсюду, а не там, где я хочу.
Кто-нибудь знает о хорошем расширении tableorter или конкретной конфигурации, которая позволяет tableorter сохранять дочерние строки сгруппированными вместе с родительской строкой даже после сортировки? Или мне нужно отказаться от tableorter в пользу какого-то другого API или начать уродливый процесс написания собственного виджета? Следует ли мне избегать подхода на основе CSS, скрывающего отдельные строки таблицы для представления свернутых строк?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Если вы хотите сохранить tableorter, есть мод, который я использовал для этой цели доступна здесь
После его включения ваша вторая (расширяемая дочерняя) строка будет иметь класс «expand-child», и tableorter будет знать, что эта строка должна быть в паре со своим родителем (предыдущая строка).
привет Адам, я недавно наткнулся на этот пост. Я разместил новый вопрос, который меня интересует, можете ли вы взглянуть на него: stackoverflow.com/questions/9240905/…. Суть в том, что мои добавленные строки AJAX не получают атрибутов, которые делают их сворачиваемыми. Мне интересно, как убедиться, что tableorter.js правильно добавляет DOM на AJAX. спасибо, -тим
Уродливое исправление вместо использования вышеуказанного включает в себя указание классов parentId css и childId css для родительских и дочерних строк, а затем использование виджета для повторной настройки. На всякий случай еще кто-нибудь столкнется с этой проблемой. Это явно не лучший код, но у меня он работает!
$("tbody tr[class^='parent']", table).each(function() {
$(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});
Фактически, тот мод Tableorter, упомянутый @AdamBellaire, был добавлен в Tableorter v2.0.5. Я задокументировал как использовать опцию ccsChildRow в своем блоге.
Также, если вам интересно, у меня есть вилка Tableorter на github, который имеет множество улучшений и полезных виджетов :)
Начиная с версии 2.4, класс expand-child изменен на tablesorter-childRow. Внимание для пользователей новой версии.
Я смог преодолеть это, назначив дочерние атрибуты rel дочерним элементам и родительские атрибуты 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);
});
})
Спасибо. Я нашел этот мод, но не видел документации о том, что с ним делать. Вы в значительной степени нашли единственный ресурс в Google, как и я, который может это сделать, но очевидно, что вы поняли это лучше, чем я. Я написал собственное некрасивое исправление.