wake-up-neo.com

jQuery-Benutzeroberfläche Sortierbar mit Tabelle und tr Breite

Ich verwende jQuery UI sortierbar, um mein Tabellenraster sortierbar zu machen. Der Code scheint in Ordnung zu sein, aber da ich tds nicht breiter mache, verkleinert er den Inhalt, wenn ich tr ziehe.

Beispielsweise; Wenn meine Tabellenzeile beim Ziehen 500px beträgt, beträgt sie 300px. Ich gehe davon aus, dass dies geschieht, weil im Raster keine Breite definiert ist. Das liegt daran, dass ich zwei Klassen für die tds (fix und liquid) verwende.

Die Klasse fix macht das td gleich der Inhaltsbreite und liquid macht das td zu 100% breit. Dies ist mein Ansatz für eine Rastertabelle, ohne dass ich tds die Breite zuweisen muss.

Hast du eine Idee, wie ich mit meinem Ansatz sortierbare Ergebnisse erzielen kann?

153
ntan

Ich habe die Antwort gefunden hier .

Ich habe es leicht modifiziert, 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;
  },
252

Ich denke, es kann helfen:

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

Die hier ausgewählte Antwort ist eine wirklich gute Lösung, aber es gibt einen schwerwiegenden Fehler, der in der ursprünglichen JS-Geige auftaucht ( http://jsfiddle.net/bgrins/tzYbU/ ): Versuchen Sie, die längste zu ziehen Reihe ( Gott segne Sie, Herr Rosewater ), und der Rest der Zellenbreiten bricht zusammen.

Dies bedeutet, dass das Festlegen der Zellenbreiten für die gezogene Zelle nicht ausreicht. Sie müssen auch die Breiten für die Tabelle festlegen.

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

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

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 festgelegt.

Um dies zu umgehen, müssen Sie beim Hinzufügen oder Ändern von Inhalten die eingestellten Breiten löschen:

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

Fügen Sie dann Ihren Inhalt hinzu und korrigieren Sie die Breite erneut.

Dies ist noch keine vollständige Lösung, da Sie (insbesondere bei einer Tabelle) einen Drop-Platzhalter benötigen. Dazu müssen wir beim Start eine Funktion hinzufügen, die den Platzhalter erzeugt:

$('#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/

28
Keith

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

Getestet mit der jsFiddle .

6
vincentp

Rufen Sie diesen folgenden Code auf, wenn Ihre Tabelle zum Sortieren bereit ist. Dadurch wird sichergestellt, dass Ihre td-Elemente eine feste with-Struktur haben, ohne die Tabellenstruktur zu unterbrechen.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  
4
Teoman shipahi
$(function() {
    $( "#sort tbody" ).sortable({
        update: function () {
                                var order = $(this).sortable("toArray").join();
                                $.cookie("sortableOrder", order);
                        }
    });
    if($.cookie("sortableOrder")){
        var order = $.cookie("sortableOrder").split(",");
        reorder(order, $("#sort tbody"));
    }
    function reorder(aryOrder, element){
      $.each(aryOrder, function(key, val){
              element.append($("#"+val));
      });
    }
  });
0
Peter

Es scheint, als ob disableSelection() - Methode schlecht und heutzutage veraltet ist. Ich kann keine Texteingaben mehr in einer sortierbaren Zeile in Mozilla Firefox 35.0 Verwenden. Es ist einfach nicht mehr fokussierbar.

0
Miika Kontio

Die Lösung von Keith ist in Ordnung, hat aber in Firefox ein wenig Chaos verursacht, das die Colspans nicht addiert, sondern auf sie aufmerksam gemacht hat. (Der alte js Saitentyp Schmerzen im Knie)

ersetzen dieser Zeile:

 cellCount += colspan;

mit:

 cellCount += colspan-0;

Behebt das Problem. (Da js gezwungen ist, die Variablen als Zahlen anstatt als Zeichenketten zu behandeln)

0
Max

Die Antwort von Dave James Miller hat für mich 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-Callback Folgendes hinzugefügt

$(document.body).append($helper);

Hier ist der vollständige Rückruf mit der obigen Zeile hinzugefügt:

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

  // append it to the body to avoid offset dragging
  $(document.body).append($helper);

  return $helper;
}

Ich hätte dies als Kommentar zu Daves Antwort hinzugefügt, aber ich hatte nicht genug Repräsentanten auf diesem Konto.

0
Shea Riley

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 verkleinert wird. Ich hoffe es hilft :)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
    let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
        $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};
0
Ach