Far funzionare jQuery tablesorter con righe di tabella nascoste / raggruppate
-
03-07-2019 - |
Domanda
Ho la tabella classica con record espandibili e comprimibili che se espansi mostrano diversi sottoregistrati (come nuovi record nella stessa tabella principale, non alcuni div / tabella figlio). Sto anche usando tableorter e lo adoro assolutamente.
Il problema è che tablesorter non mantiene i record figlio espansi accanto ai record padre. Li ordina come se fossero al massimo livello. Quindi ogni volta che la tabella viene ordinata per colonna, le righe secondarie finiscono dappertutto e non dove le voglio.
Qualcuno conosce una buona estensione a tableorter o configurazione specifica che consente a tableorter di mantenere le righe figlio raggruppate insieme alla riga padre anche dopo l'ordinamento? O devo rinunciare a tableorter a favore di qualche altra API o iniziare il brutto processo di scrittura del mio widget? Devo evitare l'approccio basato su CSS di nascondere singole righe della tabella per rappresentare le righe di compressione?
Soluzione
Se vuoi mantenere tablesorter, esiste una mod che ho usato a questo scopo disponibile qui
Dopo averlo incluso, fai in modo che la tua seconda riga (figlio espandibile) abbia la classe " expand-child " ;, e tablesorter saprà mantenere la riga accoppiata con il suo genitore (riga precedente).
Altri suggerimenti
In realtà, è stato aggiunto mod di tableorter menzionato da @AdamBellaire a tablesorter v2.0.5 . Ho documentato come utilizzare ccsChildRow
opzione sul mio blog.
Inoltre, se sei interessato, ho un fork di tablesorter su github che ha molti miglioramenti e widget utili :)
Una brutta soluzione invece di utilizzare quanto sopra implica la specifica della classe css parentId e della classe css childId per le righe padre e figlio, e quindi l'uso di un widget per ri-regolare. Nel caso in cui qualcun altro incontri questo problema. Chiaramente non è affatto il miglior codice, ma funziona per me!
$("tbody tr[class^='parent']", table).each(function() {
$(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});
Sono stato in grado di superare questo problema assegnando gli attributi rel figlio ai figli e gli attributi rel padre ai genitori. Quindi giro attraverso il tavolo all'inizio e nascondo tutti i bambini e li riaccendo al termine dell'ordinamento. Uso anche una funzione di attivazione / disattivazione per visualizzare i bambini. Ecco la mia soluzione:
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);
});
})