Obtendo tablesorter jQuery para trabalhar com linhas de tabela ocultos / agrupados

Question

Eu tenho a tabela clássica com registros expansíveis e expansíveis que se expandiu mostram vários Subregistros (como novos registros na mesma tabela pai, e não algum div criança mesa / criança). Também estou usando tablesorter e absolutamente amor.

O problema é que tablesorter não está mantendo expandiu registros filho junto aos registros pai. Ele classifica-los como se fossem nível superior. Assim, cada vez que a tabela fica resolvido por uma coluna das linhas filhas acabam por todo o lugar e não onde eu quero que eles.

Alguém sabe de uma boa extensão para configuração tablesorter ou específica que permite tablesorter para manter linhas filho agrupada com a linha pai mesmo após separação? Ou eu tenho que desistir tablesorter em favor de algum outro API ou iniciar o processo feio de escrever meu próprio widget? Devo evitar a abordagem baseada css de esconder linhas individuais da tabela para representar linhas de colapso?

Answer 1

Se você quiser manter tablesorter, há um mod que eu usei para esta finalidade disponível aqui

Depois de incluí-lo, você faz o seu segundo (criança expansível) fileira têm a classe "expandir-criança", e tablesorter vai saber para manter a linha emparelhado com o seu (linha anterior) pai.

Answer 2

Na verdade, que foi adicionado modificação de tablesorter mencionado por @AdamBellaire tablesorter v2.0.5 . Tenho documentado como usar a opção ccsChildRow no meu blog.

Além disso, se você estiver interessado, eu tenho um fork do tablesorter em github que tem um monte de melhorias e widgets úteis:)

Answer 3

correção feio em vez de usar a classe parentId css acima envolve a especificação e classe css childId para linhas pai e filho, e em seguida, usando um widget para re-ajustar. Apenas no caso de alguém corre outro lugar em todo este problema. Ele claramente não é o melhor código em tudo, mas funciona para mim!

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

Answer 4

Eu era capaz de superar este atribuindo atributos rel criança para crianças e atributos rel pai aos pais. Então ciclo I através da tabela no início e esconder todas as crianças e reappend-los após a reordenação está concluída. Eu também usar uma função de alternância para exibir as crianças. Aqui está a minha solução:

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);
    });
})