jquery find - jquery UI ordinabile con tavolo e larghezza tr




5 Answers

Ho trovato la risposta here .

L'ho leggermente modificato 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;
  },
operator selector

Sto usando jQuery UI ordinabile per rendere la mia griglia di tabella ordinabile. Il codice sembra funzionare bene ma poiché non sto aggiungendo la larghezza a td s, quando trascino il tr si riduce il contenuto.

Per esempio; se la mia fila di tabelle è di 500px quando inizio a trascinare, diventa 300px. Presumo che ciò accada perché non è definita alcuna larghezza nella griglia. Questo perché sto usando due classi per il td s ( fix e liquid ).

La classe fix rende il td uguale alla larghezza del contenuto e il liquid rende la larghezza del td 100%. È il mio approccio per la tabella della griglia senza dover assegnare la larghezza a td s.

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




La risposta selezionata qui è una soluzione davvero bella, ma ha un bug grave che è evidente nel fiddle JS originale ( 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 non è sufficiente fissare le larghezze della cella nella cella trascinata, 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 della cella vengono ora corrette.

Per ovviare a questo problema quando aggiungi o modifichi il contenuto, devi cancellare il set di larghezze:

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

Quindi aggiungi il tuo contenuto, quindi aggiusta nuovamente le larghezze.

Questa non è ancora una soluzione completa, in quanto (soprattutto con una tabella) è necessario un segnaposto di rilascio. Per questo abbiamo bisogno di aggiungere una funzione all'avvio che costruisca 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/




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

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



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 è sfalsato rispetto alla 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 la riga sopra aggiunta:

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 rep per questo account.




Applica l'ordinabile all'elemento tbody della tabella e imposta l'helper su "clone", come descritto API di jquery-ui

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



Related

jquery jquery-ui jquery-ui-sortable