pantalla - jquery UI Clasificable con tabla y ancho tr

tabla responsive bootstrap

Question

Estoy usando jQuery UI para hacer que mi tabla cuadriculada se pueda ordenar. El código parece funcionar bien, pero como no agrego ancho a td s, cuando lo arrastro, reduce el contenido.

Por ejemplo; si la fila de mi tabla es 500px cuando empiezo a arrastrar, se convierte en 300px. Supongo que eso está sucediendo porque no se define ancho en la grilla. Eso es porque estoy usando dos clases para el td s ( fix y liquid ).

La clase de fix hace que el td igual al ancho del contenido y el liquid hace que el ancho del td sea ​​del 100%. Es mi enfoque para la tabla de grillas sin tener que asignar ancho a td s.

¿Alguna idea de cómo hacer un trabajo de ordenamiento con mi enfoque?

Answer 1

Aplica el ordenable al elemento tbody de la tabla y simplemente configura el helper como ''clon'', como se describe en la API jquery-ui

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

Answer 2

Creo que puede ayudar:

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

Answer 3

Encontré la respuesta here .

Lo modifiqué ligeramente para clonar la fila, en lugar de agregar anchos al 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 4

La respuesta de Dave James Miller funcionó para mí, pero debido al diseño de los divs del contenedor en mi página, el helper que se arrastra con el cursor del mouse se desplaza desde la posición del mouse. Para solucionarlo, agregué lo siguiente a la devolución de llamada de ayuda

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

Aquí está la devolución de llamada completa con la línea anterior añadida:

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

Hubiera agregado esto como un comentario a la respuesta de Dave, pero no tuve suficiente reputación en esta cuenta.

Answer 5

La respuesta seleccionada aquí es una solución muy buena, pero tiene un error grave que es evidente en el violín original de JS ( jsfiddle.net/bgrins/tzYbU ): intente arrastrar la fila más larga ( God Bless You, Mr). . Rosewater ), y el resto del ancho de las celdas colapsan.

Esto significa que no es suficiente fijar el ancho de las celdas en la celda arrastrada; también debe corregir los anchos en la tabla.

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

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

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

Esto soluciona el problema del colapso de la tabla después de que arrastra la primera columna, pero introduce una nueva: si cambia el contenido de la tabla, los tamaños de la celda quedan corregidos.

Para evitar esto al agregar o cambiar contenido, necesitaría borrar el ancho establecido:

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

Luego agrega tu contenido y luego arregla el ancho nuevamente.

Esto todavía no es una solución completa, ya que (especialmente con una tabla) necesita un marcador de posición drop. Para eso tenemos que agregar una función al inicio que construye el marcador de posición:

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

La solución de Keith está bien, pero causó un pequeño estrago en Firefox que no aumentó las colspans, sino que las dio como resultado. (El viejo tipo de cuerda js dolor en la rodilla)

reemplazando esta línea:

 cellCount += colspan;

con:

 cellCount += colspan-0;

Arregla el problema (Como js está obligado a tratar las variables como números en lugar de cadenas)

Answer 7

Llame a este código cuando su tabla esté lista para ser ordenada, esto asegurará que sus elementos td tengan una estructura fija sin romper la tabla.

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

Answer 8

Parece que disableSelection() - el método es malo y obsoleto hoy en día. Ya no puedo usar las entradas de texto dentro de la fila ordenable en Mozilla Firefox 35.0 . Simplemente ya no es enfocable.

Answer 9

Parece que clonar la fila no funciona bien en IE8, pero la solución original sí.

Probado con el jsfiddle.net/bgrins/tzYbU .