Получение jQuery tableorter для работы со скрытыми / сгруппированными строками таблицы

Question

У меня есть классическая таблица с разворачиваемыми и складными записями, которые при раскрытии показывают несколько подзаписей (как новые записи в той же родительской таблице, а не как дочернюю таблицу div / child). Я также использую TableSorter и очень люблю его.

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

Кто-нибудь знает о хорошем расширении TableSorter или конкретной конфигурации, позволяющей TableSort сохранять сгруппированные дочерние строки вместе с родительской строкой даже после сортировки? Или я должен отказаться от TableSorter в пользу какого-то другого API или начать уродливый процесс написания своего собственного виджета? Стоит ли избегать подхода на основе css, заключающегося в сокрытии отдельных строк таблицы для представления свернутых строк?

Answer 1

Если вы хотите сохранить TableSorter, есть мод, который я использовал для этой цели. доступно здесь

После его включения у вашей второй (расширяемой дочерней) строки будет класс "expand-child", и TableSorter будет знать, чтобы сохранить строку в паре со своим родителем (предыдущая строка).

Answer 2

На самом деле был добавлен мод табличного сортировщика , упомянутый @AdamBellaire. tableorter v2.0.5 . Я задокументировал как использовать ccsChildRow опция в моем блоге.

Кроме того, если вам это интересно, у меня есть ответвление TableSorter на github , который имеет множество улучшений и полезных виджетов:)

Answer 3

Уродливое исправление вместо использования вышеприведенного включает в себя указание класса parentId css и класса childId css для родительских и дочерних строк, а затем использование виджета для повторной настройки. На тот случай, если кто-нибудь еще столкнется с этой проблемой. Это явно не самый лучший код, но он работает для меня!

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});

Answer 4

Мне удалось преодолеть это, назначив атрибуты 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);
    });
})