UI jquery Ordinabile con tavolo e larghezza tr


155

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?


3
La risposta di Yaroslav è la vera mvp!
Brade,

Ho avuto lo stesso problema, penso che @Yaroslav abbia la risposta corretta per gestire i tavoli, che è ciò di cui l'OP sta chiedendo
doz87

Risposte:


254

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

@Dave James Miller Come faresti funzionare l'opzione segnaposto?
shaun5,

5
Dave, grazie per averlo condiviso, ho creato un jsFiddle per mostrare le differenze tra originale, modificato e nessuna correzione applicata: jsfiddle.net/bgrins/tzYbU . Aggiornerò anche il post originale con la tua soluzione.
Brian Grinstead,

9
Funziona abbastanza bene, ma penso che ci sia ancora un leggero problema; quando si trascina / rilascia la riga, il resto delle colonne della tabella potrebbe cambiare larghezza a causa della riga mancante. Immagino che anche le loro larghezze debbano essere riparate ...
Jez,

1
Questo mi ha risparmiato così tanto lavoro. Dovrebbe essere contrassegnato come la risposta corretta.
Andrew Bessa,

3
Ho scoperto che la larghezza stava portando a celle imbottite che QUITE non aveva ragione. Ho scambiato per$(this).width($originals.eq(index).outerWidth());
Barry Carlyon il

166

Penso che possa aiutare:

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

13
In che modo questa non è la risposta migliore? Una semplice linea di CSS lo risolve per me.
jcrowson,

8
Sono d'accordo! Non crederai a come una semplice linea di CSS risolva la tua tabella ordinabile: gli esperti di StackOverflow sono sconcertati!
Brade,

3
Questa è la risposta. Grazie @Yaroslav
Steffi

3
Questa NON è una soluzione generale e si tradurrà in un aspetto diverso della riga trascinata
Tomas M

13
Questa soluzione è molto buona, ma può influire su altri elenchi che non sono tabelle. Il mio consiglio è di modificare la risposta per renderla più specifica. In questo modo => table tr.ui-sortable-helper {display: table! Important; }
Rafael Gomes Francisco,

29

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/


Grazie, mi risparmia tempo
super pantera,

La tecnica segnaposto qui è killer! Totalmente risolto il mio problema.
jessegavin,

1
Questa soluzione è davvero buona, e la tecnica segnaposto è davvero solida, questa dovrebbe essere la risposta selezionata secondo me.
Chris James Champeau,

1
Ciò provoca comunque comportamenti spiacevoli quando si dispone di una riga molto alta. Tutte le altre file si nasconderanno dietro di esso. Vorrei aggiungere questo al metodo di avvio:$(".must-have-class").css("height", $(ui.item).outerHeight());
Itzik Ben Hutta,

6

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

Testato con jsFiddle .


Grazie per aver installato jsFiddle. Vado con la soluzione originale perché, come notato da Jez, le altre celle della riga possono cambiare larghezza quando si trascina una riga.
Roger,

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 interrompere la tabella.

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

Sì, è praticamente la stessa della mia risposta, sebbene anche la mia thfunzioni td. Corregge il collasso della riga trascinata e il collasso della tabella, ma a costo di fissare le larghezze.
Keith,

1

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

0

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)


0

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.


Dopo aver letto la documentazione di jQuery, ho scoperto che il ordinabile accetta anche un'opzione "appendTo" che specifica a quale elemento viene aggiunto l'helper.
Shea Riley,

0

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.


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

1
Sono necessarie ulteriori spiegazioni!
Afsanefda,

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

-4

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

1
Non sembra aiutare.
Andrew,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.