UI jquery Ordinabile con tavolo e larghezza tr

Sto utilizzando l'interfaccia utente jQuery per rendere ordinabile la griglia della mia tabella. Il codice sembra funzionare bene, ma poiché non sto aggiungendo larghezza a tds, quando trtrascino il contenuto, il contenuto si restringe.

Per esempio; se la riga della mia tabella è 500 px quando inizio a trascinare, diventa 300 px. Suppongo che ciò accada perché non è stata definita alcuna larghezza nella griglia. Questo perché sto usando due classi per la tds ( fixe liquid).

La fixclasse rende tduguale alla larghezza del contenuto e liquidrende la tdlarghezza del 100%. È il mio approccio per la tabella della griglia senza dover assegnare larghezza a tds.

Qualche idea su come rendere il lavoro ordinabile con il mio approccio?

Ho trovato la risposta qui .

L'ho modificato leggermente per clonare la riga, invece di aggiungere larghezze all'originale:

  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;
  },

Penso che possa aiutare:

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

La risposta selezionata qui è una soluzione davvero piacevole, ma ha un grave bug che è evidente nel violino JS originale ( http://jsfiddle.net/bgrins/tzYbU/ ): prova a trascinare la riga più lunga ( God Bless You, Mr Rosewater ) e il resto della larghezza delle celle crolla.

Ciò significa che il fissaggio delle larghezze di cella sulla cella trascinata non è sufficiente: è inoltre necessario correggere le larghezze sulla tabella.

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

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

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

Questo risolve il problema del collasso della tabella dopo aver trascinato la prima colonna, ma ne introduce una nuova: se si modifica il contenuto della tabella, le dimensioni delle celle vengono ora corrette.

Per aggirare questo problema quando si aggiungono o si modificano contenuti, è necessario cancellare le larghezze impostate:

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

Quindi aggiungi i tuoi contenuti, quindi correggi di nuovo le larghezze.

Questa non è ancora una soluzione completa, poiché (soprattutto con una tabella) è necessario un segnaposto di rilascio. Per questo dobbiamo aggiungere una funzione all'avvio che crea il segnaposto:

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

Sembra che la clonazione della riga non funzioni bene su IE8, ma la soluzione originale funziona.

Testato con jsFiddle .

Chiama questo codice seguente quando la tua tabella è pronta per essere ordinata, questo assicurerà che i tuoi elementi td abbiano una struttura fissa senza interrompere la tabella.

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

jsFiddle

Dopo molti tentativi diversi, ho appena provato una soluzione semplice che completa la soluzione di Dave James Miller per evitare che il tavolo si restringa mentre trascina la riga più grande. Spero che possa aiutare :)

// 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;
};

La soluzione di Keith va bene, ma ha causato un po 'di caos in Firefox che non ha aggiunto i colspan ma li ha inseguiti. (Il vecchio dolore tipo js string al ginocchio)

sostituendo questa riga:

 cellCount += colspan;

con:

 cellCount += colspan-0;

Risolve il problema (Dato che js è costretto a trattare le variabili come numeri anziché come stringhe)

La risposta di Dave James Miller ha funzionato per me, ma a causa del layout dei div del contenitore sulla mia pagina, l'helper che trascina con il cursore del mouse è spostato dalla posizione del mio mouse. Per risolvere il problema, ho aggiunto quanto segue al callback dell'helper

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

Ecco il callback completo con l'aggiunta della riga sopra:

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

Avrei aggiunto questo come commento alla risposta di Dave, ma non avevo abbastanza rappresentante su questo account.

Sembra che il disableSelection()metodo sia cattivo e deprecato al giorno d'oggi. Non riesco più a utilizzare gli input di testo all'interno della riga in grado di ordinare Mozilla Firefox 35.0. Semplicemente non è più focalizzabile.

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

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

Applicare ordinabile all'elemento tbody della tabella e impostare l'helper su 'clone', come descritto nell'API di jquery-ui

$("$my-table-tbody").sortable({
    helper: "clone"
});