Ich verwende die jQuery-Benutzeroberfläche sortierbar, um mein Tabellenraster sortierbar zu machen. Der Code scheint gut zu funktionieren, aber da ich td
s keine Breite hinzufüge , wird tr
der Inhalt beim Ziehen verkleinert.
Beispielsweise; Wenn meine Tabellenzeile beim Ziehen 500 Pixel groß ist, wird sie 300 Pixel groß. Ich gehe davon aus, dass dies geschieht, weil im Raster keine Breite definiert ist. Das liegt daran, dass ich zwei Klassen für das td
s ( fix
und liquid
) verwende.
Die fix
Klasse macht das td
gleich der Inhaltsbreite und liquid
macht die td
Breite 100%. Es ist mein Ansatz für die Rastertabelle, ohne td
s die Breite zuweisen zu müssen .
Irgendeine Idee, wie ich mit meinem Ansatz sortierbar arbeiten kann?
Antworten:
Ich habe die Antwort hier gefunden .
Ich habe es leicht geändert, um die Zeile zu klonen, anstatt dem Original Breiten hinzuzufügen:
quelle
$(this).width($originals.eq(index).outerWidth());
Ich denke, es kann helfen:
quelle
Die ausgewählte Antwort hier ist eine wirklich nette Lösung, aber es gibt einen schwerwiegenden Fehler, der in der ursprünglichen JS-Geige ( http://jsfiddle.net/bgrins/tzYbU/ ) offensichtlich ist : Versuchen Sie, die längste Reihe zu ziehen ( God Bless You, Mr. Rosenwasser ) und der Rest der Zellbreiten kollabieren.
Dies bedeutet, dass das Festlegen der Zellenbreiten in der gezogenen Zelle nicht ausreicht. Sie müssen auch die Breite der Tabelle festlegen.
JS Fiddle: http://jsfiddle.net/rp4fV/3/
Dies behebt das Problem, dass die Tabelle nach dem Ziehen der ersten Spalte zusammenfällt, führt jedoch eine neue ein: Wenn Sie den Inhalt der Tabelle ändern, werden die Zellengrößen jetzt behoben.
Um dies beim Hinzufügen oder Ändern von Inhalten zu umgehen, müssen Sie die eingestellten Breiten löschen:
Fügen Sie dann Ihren Inhalt hinzu und korrigieren Sie die Breite erneut.
Dies ist immer noch keine vollständige Lösung, da Sie (insbesondere bei einer Tabelle) einen Platzhalter benötigen. Dazu müssen wir beim Start eine Funktion hinzufügen, die den Platzhalter erstellt:
JS Fiddle: http://jsfiddle.net/rp4fV/4/
quelle
$(".must-have-class").css("height", $(ui.item).outerHeight());
Es scheint, dass das Klonen der Zeile unter IE8 nicht gut funktioniert, aber die ursprüngliche Lösung funktioniert.
Getestet mit der jsFiddle .
quelle
Rufen Sie diesen folgenden Code auf, wenn Ihre Tabelle zum Sortieren bereit ist. Dadurch wird sichergestellt, dass Ihre td-Elemente eine feste Struktur haben, ohne die Tabellenstruktur zu beschädigen.
quelle
th
genauso gut funktioniert wietd
. Es behebt den Zusammenbruch von gezogenen Zeilen und den Zusammenbruch von Tabellen, jedoch auf Kosten der Festlegung der Breiten.jsFiddle
Nach vielen verschiedenen Versuchen habe ich gerade eine einfache Lösung ausprobiert, die die Lösung von Dave James Miller vervollständigt, um zu verhindern, dass die Tabelle beim Ziehen der größten Zeile schrumpft. Ich hoffe es wird helfen :)
quelle
Die Lösung von Keith ist in Ordnung, hat aber in Firefox ein wenig Chaos angerichtet, das die Colspans nicht addierte, sondern aufforderte. (Der alte js Saitentyp Schmerz im Knie)
Ersetzen dieser Zeile:
mit:
Behebt das Problem. (Da js gezwungen ist, die Variablen als Zahlen anstelle von Zeichenfolgen zu behandeln)
quelle
Die Antwort von Dave James Miller hat bei mir funktioniert, aber aufgrund des Layouts der Container-Divs auf meiner Seite ist der Helfer, der mit dem Mauszeiger gezogen wird, von der Position meiner Maus versetzt. Um dies zu beheben, habe ich dem Helfer-Rückruf Folgendes hinzugefügt
Hier ist der vollständige Rückruf mit der obigen Zeile hinzugefügt:
Ich hätte dies als Kommentar zu Daves Antwort hinzugefügt, aber ich hatte nicht genug Repräsentanten für dieses Konto.
quelle
Es scheint wie
disableSelection()
- Methode ist schlecht und heutzutage veraltet. Ich kann keine Texteingaben mehr in sortierbaren Zeilen verwendenMozilla Firefox 35.0
. Es ist einfach nicht mehr fokussierbar.quelle
quelle
quelle
Wenden Sie die Sortierbarkeit auf das tbody-Element der Tabelle an und setzen Sie den Helfer einfach auf 'clone', wie in der API von jquery-ui beschrieben
quelle