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

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

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

Кто-нибудь знает о хорошем расширении табличной структуры или конкретной конфигурации, которая позволяет tablesorter сохранять дочерние строки, сгруппированные вместе с родительской строкой, даже после сортировки? Или мне нужно отказаться от tablesorter в пользу какого-либо другого API или запустить уродливый процесс написания моего собственного виджета? Должен ли я избегать подхода, основанного на CSS, скрыть отдельные строки таблицы для представления строк сжимания?

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 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);
    });
})