jQuery tablesorter immer mit versteckten / gruppierten Tabellenzeilen zu arbeiten

Question

Ich habe die klassische Tabelle mit erweiterbaren und zusammenklappbar Aufzeichnungen, dass, wenn erweiterte zeigt mehrere Subsätze (als neuer Datensätze in der gleichen übergeordneten Tabelle, nicht irgendein Kind div / Kind-Tabelle). Ich bin auch tablesorter mit und lieben es.

Das Problem ist, dass tablesorter nicht untergeordnete Datensätze neben dem übergeordneten Datensätze erweitert zu halten. Er sortiert sie, als ob sie Top-Niveau. So ist jedes Mal, wenn der Tisch durch eine Spalte Reihen des Kindes sortiert wird ganz über den Platz am Ende und nicht dort, wo ich sie will.

Kennt jemand eine gute Erweiterung oder spezielle Konfiguration Tablesorter die tablesorter Kind Reihen zusammen mit der Zeilenmutter gruppiert zu halten ermöglicht auch nach der Sortierung? Oder muss ich tablesorter zugunsten einer anderen API aufgeben oder starten Sie den hässlichen Prozess mein eigenes Widget schreiben? Soll ich den CSS-basierter Ansatz von Ausblenden einzelne Zeilen der Tabelle vermeiden Zusammenbruch Zeilen darstellen?

Answer 1

Wenn Sie tablesorter halten wollen, gibt es eine Mod, die ich für diesen Zweck verwendet haben hier,

es Nachdem einschließlich, Sie machen Ihre zweite (erweiterbar Kind) Zeile die Klasse haben „expand-Kind“, und tablesorter wissen die Zeile mit der Mutter (vorhergehenden Reihe) gepaart zu halten.

Answer 2

mod von tablesorter Eigentlich von @AdamBellaire erwähnt wurde hinzugefügt tablesorter v2.0.5 . Ich habe wie die ccsChildRow Option verwenden auf meinem Blog.

Auch wenn Sie interessiert sind, habe ich eine Gabel von tablesorter auf github die eine Menge von Verbesserungen hat und nützliche Widgets:)

Answer 3

Hässliche fix anstelle der oben der Verwendung beinhaltet die Angabe parentId CSS-Klasse und childID CSS-Klasse für Eltern und Kind Reihen, und dann ein Widget mit neu zu justieren. Für den Fall, jemand läuft sonst über dieses Problem. Es ist eindeutig nicht der beste Code überhaupt, aber es funktioniert für mich!

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

Answer 4

Ich war in der Lage, dies zu überwinden, indem Kind rel Zuordnung von Attributen zu den Kindern und Eltern rel-Attribute zu den Eltern. Dann habe ich Schleife durch die Tabelle am Anfang und verstecken alle Kinder und reappend sie nach der Sortierung abgeschlossen ist. Ich benutze auch eine Umschaltfunktion, die Kinder angezeigt werden soll. Hier ist meine Lösung:

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