jquery UI Sortable mit Tabelle und tr Breite

Question

Ich verwende jQuery UI sortable, um mein Tabellengitter sortierbar zu machen. Der Code scheint gut zu funktionieren, aber weil ich nicht hinzufügen Breite zu td s, wenn ich die tr wird der Inhalt verkleinert.

Zum Beispiel, wenn meine Tabelle Zeile 500px ist, wenn ich anfangen zu ziehen, wird es 300px. Ich nehme an, dass das passiert, weil keine Breite im Raster definiert ist. Das liegt daran, dass ich zwei Klassen für die td s ( fix y liquid ).

El fix Klasse macht die td gleich der Breite des Inhalts und liquid macht die td Breite 100%. Das ist mein Ansatz für eine Rastertabelle, ohne dass man die Breite der td s.

Irgendeine Idee, wie man sortable mit meinem Ansatz arbeiten zu machen?

Answer 1

Ich habe die Antwort gefunden aquí .

Ich habe sie leicht geändert, um die Zeile zu klonen, anstatt dem Original Breiten hinzuzufügen:

  helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },

Answer 2

Ich denke, das kann helfen:

.ui-sortable-helper {
    display: table;
}

Answer 3

Die ausgewählte Antwort hier ist eine wirklich schöne Lösung, aber sie hat einen schwerwiegenden Fehler, der in der ursprünglichen JS-Trickserie ( http://jsfiddle.net/bgrins/tzYbU/ ): Ziehen Sie die längste Zeile ( Gott segne Sie, Mr. Rosewater ), und der Rest der Zellbreiten kollabiert.

Das bedeutet, dass es nicht ausreicht, die Zellbreiten in der gezogenen Zelle festzulegen, sondern dass Sie auch die Breiten in der Tabelle festlegen müssen.

$(function () {
    $('td, th', '#sortFixed').each(function () {
        var cell = $(this);
        cell.width(cell.width());
    });

    $('#sortFixed tbody').sortable().disableSelection();
});

JS Fiddle: http://jsfiddle.net/rp4fV/3/

Damit ist das Problem des Zusammenklappens der Tabelle nach dem Ziehen der ersten Spalte behoben, aber es gibt ein neues Problem: Wenn Sie den Inhalt der Tabelle ändern, sind die Zellengrößen jetzt fixiert.

Um dies zu umgehen, wenn Sie Inhalte hinzufügen oder ändern, müssen Sie die eingestellten Breiten löschen:

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});

Fügen Sie dann Ihren Inhalt hinzu, und legen Sie die Breiten erneut fest.

Dies ist immer noch keine vollständige Lösung, da Sie (insbesondere bei einer Tabelle) einen Platzhalter für die Ablage benötigen. Dafür müssen wir beim Start eine Funktion hinzufügen, die den Platzhalter erstellt:

$('#sortFixed tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder:'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather than TR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

JS Fiddle: http://jsfiddle.net/rp4fV/4/

Answer 4

Es scheint, dass das Klonen der Zeile im IE8 nicht gut funktioniert, aber die ursprüngliche Lösung funktioniert.

Getestet mit dem jsFiddle .

Answer 5

Rufen Sie den folgenden Code auf, wenn Ihre Tabelle sortiert werden soll, Dadurch wird sichergestellt, dass Ihre td-Elemente einen festen Platz haben, ohne die Tabellenstruktur zu unterbrechen.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });