jquery UI Sortable avec tableau et largeur tr

Question

J'utilise jQuery UI sortable pour rendre ma grille de tableau triable. Le code semble fonctionner correctement, mais comme je n'ajoute pas de largeur à l'élément td lorsque je fais glisser le tr cela réduit le contenu.

Par exemple, si la ligne de mon tableau mesure 500px, lorsque je commence à la faire glisser, elle devient 300px. Je suppose que cela se produit parce qu'aucune largeur n'est définie dans la grille. Cela est dû au fait que j'utilise deux classes pour les éléments suivants td s ( fix et liquid ).

Le site fix fait de la classe td égale à la largeur du contenu et liquid fait le td largeur 100%. C'est mon approche pour le tableau de la grille sans avoir à assigner la largeur à td s.

Avez-vous une idée de la façon dont sortable peut fonctionner avec mon approche ?

Answer 1

J'ai trouvé la réponse ici .

Je l'ai légèrement modifié pour cloner la ligne, au lieu d'ajouter des largeurs à l'original :

  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

La réponse sélectionnée ici est une très bonne solution, mais elle comporte un grave bogue qui est apparent dans le bidouillage JS original ( http://jsfiddle.net/bgrins/tzYbU/ ) : essayez de faire glisser la ligne la plus longue ( Que Dieu vous bénisse, M. Rosewater ), et le reste de la largeur des cellules s'effondre.

Cela signifie qu'il ne suffit pas de fixer les largeurs de cellule sur la cellule glissée - vous devez également fixer les largeurs sur le tableau.

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

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

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

Cela résout le problème de l'effondrement du tableau après avoir fait glisser la première colonne, mais en introduit un nouveau : si vous modifiez le contenu du tableau, la taille des cellules est désormais fixe.

Pour contourner ce problème lors de l'ajout ou de la modification de contenu, vous devez effacer les largeurs définies :

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

Ajoutez ensuite votre contenu, puis fixez à nouveau les largeurs.

Ce n'est toujours pas une solution complète, car (surtout avec un tableau) vous avez besoin d'un placeholder de dépôt. Pour cela, nous devons ajouter une fonction au démarrage qui construit le placeholder :

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

Il semble que le clonage de la ligne ne fonctionne pas bien sous IE8, mais la solution originale fonctionne.

Testé avec le jsFiddle .

Answer 4

Appelez le code suivant lorsque votre tableau est prêt à être trié, cela permettra de s'assurer que vos éléments td ont une valeur fixe sans casser la structure du tableau.

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

Answer 5

La solution de cet article de blog fonctionne pour moi :

// Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

$("#sort tbody").sortable({
    helper: fixHelper
}).disableSelection();