Tabellenspalten neu anordnen?

8

Kennt jemand eine Möglichkeit, Tabellenspalten mit jQuery umzuordnen?

Ich meine nicht die Sortierung - ich meine dynamisch ganze Spalten nach links oder rechts in einer Tabelle verschieben.

Ich bin mir des hervorragenden Drag-in-Plug-ins bewusst, aber ich brauche nichts, was dem Benutzer erlaubt Verschieben Sie Spalten, ich brauche etwas, das die Neuordnung in einer konfigurierbaren Weise tun wird.

    
Richard 20.07.2011, 08:33
quelle

4 Antworten

8

Die Idee ist, über alle Reihen (trs) der Tabelle zu gehen und die gewünschten tds zu tauschen. Lassen Sie uns Spalte 2 und Spalte 4 vertauschen:

%Vor%

Ich hoffe, das hilft.

    
scaryzet 20.07.2011, 08:53
quelle
3

Dieser Code sollte für Sie funktionieren.

%Vor%

Edit: Wenn Sie $ (this) .find ("td") einer Variablen zuweisen, würde dies zu einer besseren Performance führen. Aber der Kontext war auf einen einzigen tr. Also nahm ich an, es wäre genug, um die Idee zu geben. %Vor%     
Yiğit Yener 20.07.2011 08:53
quelle
2

Beim Lesen des Quellcodes des ziehbaren Plugins erwähnt der Autor, dass der Algorithmus für das Verschieben von Tabellenspalten aus einer Diskussion in der Newsgroup comp.lang.javascript entstanden ist. Diese Diskussion finden Sie hier: Tabellenspalten austauschen .

In diesem Thread fragt das OP nicht nach der UI-Seite der Neuordnung, sondern hilft beim Debuggen einer Funktion, die er bereits geschrieben hat, um zwei Spalten zu tauschen. Weiter unten in der Diskussion entwickelt es sich in Code, der es Ihnen ermöglicht, eine bestimmte Spaltenreihenfolge zu übergeben und den Code alle notwendigen Swaps / Moves berechnen zu lassen, um von der aktuellen Bestellung zur angegebenen Bestellung zu gelangen.

Es ist nicht jQuery (die meisten Poster auf c.l.js haben eine starke Abneigung dagegen und die meisten anderen JS-Frameworks), und daher ist es Code, den Sie hoffentlich für Ihre Bedürfnisse anpassen und dann überall einfügen können.

    
Matt Sach 20.07.2011 09:04
quelle
1

Ich habe es mit jQueryUI kombiniert, um eine großartige Drag & Drop-Aktion zu erhalten:

%Vor%

Versucht, es in jsFiddle zum Laufen zu bringen, aber ich konnte es nicht. Arbeiten auf meiner Website obwohl!

    
Phillip Senn 20.01.2014 02:04
quelle

Tags und Links