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

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

12 голосов
/ 20 октября 2008

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

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

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

Ответы [ 4 ]

16 голосов
/ 21 октября 2008

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

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

11 голосов
/ 02 октября 2012

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

Также, если вам интересно, у меня есть форк таблиц на github , который имеет множество улучшений и полезных виджетов:)

1 голос
/ 21 октября 2008

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

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});
0 голосов
/ 13 мая 2019

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