Tablas ordenables de arrastrar y soltar HTML

Question

¿Alguna vez quisiste tener una tabla ordenable de arrastrar y soltar HTML en la que pudieras ordenar tanto las filas como las columnas? Sé que es algo por lo que moriría. Hay muchas listas ordenables dando vueltas, pero encontrar una tabla ordenable parece ser imposible de encontrar.

Sé que puede acercarse bastante con las herramientas que script.aculo.us proporciona, pero me encontré con algunos problemas de navegador cruzado con ellos.

Answer 1

He usado dhtmlxGrid en el pasado. Entre otras cosas, admite filas/columnas de arrastrar y soltar, clasificación del lado del cliente (cadena, entero, fecha, personalizado) y compatibilidad con varios navegadores.

Respuesta al comentario: No, no se encontró nada mejor, acaba de pasar de ese proyecto. :-)

Answer 2

¿Qué tal sorttable? Eso parece ajustarse muy bien a sus necesidades.

Es bastante fácil de usar - cargue el archivo Javascript clasificable, luego, para cada tabla que desee que se pueda ordenar, aplique class = "sortable" a la etiqueta < >.

Entenderá inmediatamente cómo ordenar la mayoría de los tipos de datos, pero si hay algo que no es así, puede agregar una clave de clasificación personalizada para indicarle cómo ordenar. La documentación lo explica todo bastante bien.

Answer 3

Recomiendo Sortables en jQuery. Puede usarlo en elementos de la lista o casi cualquier cosa, incluidas las tablas.

jQuery es muy compatible con varios navegadores y lo recomiendo todo el tiempo.

Answer 4

Si no le molesta Java, hay una biblioteca muy útil para GWT llamada GWT-DND eche un vistazo a la demostración en línea para ver qué tan poderosa es.

Answer 5

La mayoría de los marcos (Yui, MooTools, jQuery, Prototype/Scriptaculous, etc.) tienen una función de lista ordenable. Investigue un poco sobre cada uno y elija el que más se ajuste a sus necesidades.

Answer 6

He usado el plugin ordenable de jQuery UI con buenos resultados. De marcado similar a esto:

y

<table id="myTable"> 
<thead> 
<tr><th>ID</th><th>Name</th><th>Details</th></tr> 
</thead> 
<tbody class="sort"> 
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr> 
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr> 
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr> 
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr> 
</tbody> 
</table> 

luego en las javascript

$('.sort').sortable({ 
    cursor: 'move', 
    axis: 'y', 
    update: function(e, ui) { 
     href = '/myReorderFunctionURL/'; 
     $(this).sortable("refresh"); 
     sorted = $(this).sortable("serialize", 'id'); 
     $.ajax({ 
      type: 'POST', 
      url: href, 
      data: sorted, 
      success: function(msg) { 
       //do something with the sorted data 
      } 
     }); 
    } 
}); 

Este publica una versión serializada de los ID de los ítems a la URL dada. Esta función (PHP en mi caso) luego actualiza las órdenes de los artículos en la base de datos.

Answer 7

La respuesta de David Heggie fue la más útil para mí. Puede ser un poco más conciso:

var sort = function(event, ui) { 
    var url = "/myReorderFunctionURL/" + $(this).sortable('serialize'); 
    $.post(url, null,null,"script"); // sortable("refresh") is automatic 
} 

$(".sort").sortable({ 
    cursor: 'move', 
    axis: 'y', 
    stop: sort 
}); 

funciona para mí, con el mismo marcado.

Answer 8

Si lo encuentra.serializar() devolver nulo en solución de David Heggie continuación, establezca los valores de identificación para el TRs como 'id_1' en lugar de simplemente '1'

Ejemplo:

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr> 
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr> 
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr> 
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr> 

Lo anterior se serializar como "id [] = 1 & id [] = 2 & id [] = 3 "

Puede usar '=', '-' o '_' en lugar de '_'. Y cualquier otra palabra además de "id".