Ich habe eine ASP.NET MVC-Site und ich habe eine HTML-Tabelle in einer Ansicht. Wie im Beispiel HTML-Code habe ich manchmal verschachtelte Tabellen innerhalb von Zellen, aber das kann ignoriert werden, bis Sie das Ende der Frage erreichen.
%Vor%Ich möchte jetzt dieses jQuery-Multiselect-Plugin verwenden, damit der Benutzer die Reihenfolge der gewünschten Spalten auswählen und anzeigen kann / bestimmte Spalten ausblenden So erstelle ich eine Multiselect, die wie folgt aussieht:
%Vor%Damit der Benutzer die Bestellung auswählen kann, werde ich diese Daten zunächst im lokalen Speicher speichern. Alles, was ich speichere, ist also ein Array von Strings, die die "sichtbare Reihenfolge der Spalten" darstellen, mit der der Multiselect-Picker eingerichtet wird. Das funktioniert einwandfrei und ich kann dieses Array oder "sortierte Spaltennamen" beibehalten.
Meine Frage ist, was ist der beste Weg, um dieses String-Array zu nehmen und die HTML-Tabelle zu aktualisieren, um diese Spaltenreihenfolge und Spaltensichtbarkeit widerzuspiegeln?
Ich weiß, dass es größere Tabellengittergitter gibt, die diese Funktion haben, aber in diesem Fall muss ich bei einer handcodierten HTML-Tabelle bleiben.
@Rick Hitchcocks Antwort unten hat mir 90% des Weges gebracht, aber es gibt ein offenes Problem, das, wie ich realisiere, meine Frage ein wenig komplizierter macht. In bestimmten Fällen habe ich eine geschachtelte Tabelle in der Haupttabelle. Ich habe die Frage aktualisiert, um diese Situation zu berücksichtigen. Ich möchte nicht, dass der Spaltenauswahl-Code die geschachtelte Tabelle beeinflusst . Daher suche ich nach einer Möglichkeit, den Code nur auf die Haupttabelle anzuwenden.
[ursprüngliche Antwort wurde aufgrund einer aktualisierten Frage entfernt]
Gegeben ein Array ( arr ) wie folgt:
... oder das:
%Vor%... damit ordnen sich die Spalten der Haupttabelle an und es werden nicht verwendete Spalten ausgeblendet:
%Vor%Klicken Sie auf eine Schaltfläche, um die Tabelle neu anzuordnen.
Wie es funktioniertDadurch werden nachfolgende Selektoren auf die Zeilen der Haupttabelle beschränkt:
%Vor% Auch wenn Sie tbody ausschließen, wird es für Sie hinzugefügt . Aus diesem Grund ist dies immer eine leere Sammlung: $('#mainTable > tr') .
tr -Auflistung (aus der vorherigen Zeile) aus:
%Vor%
Als Nebeneffekt werden alle Nachkommen ebenfalls ausgeblendet.
Es entspricht:
%Vor% jQuerys Methoden children und find sind oft unnötig (und kostenintensiv), wenn Sie dasselbe mit CSS-Selektoren erreichen können - insbesondere angesichts der Vorteile des optionalen Parameters context :
Dies betrachtet jedes Element des Arrays:
%Vor%Dies ruft
index() des th -Elements ab (das ein direktes Kind der tr -Auflistung ist), in dem sein text() dem Array-Wert entspricht:
%Vor%
Das ist die Spalte, die wir zeigen möchten.
Schließlich fügt dies jedem Mitglied der tr -Kollektion alle seine Kinder mit dieser Spaltennummer hinzu und zeigt ihnen:
jQuerys append() -Methode (wie die JavaScript-Methode appendChild() ) verschiebt ein Element - entweder in das DOM oder irgendwo anders im DOM.
Wenn wir das wissen, können wir oft Methoden wie detach() vermeiden.
Tags und Links javascript html jquery html-table multi-select