javascript - que - HTML arrastrar y soltar tablas ordenables

que es drag and drop

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 puedes acercarte bastante con las herramientas que script.aculo.us proporciona, pero encontré algunos problemas con varios navegadores.

Answer 1

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 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 = "ordenable" a la etiqueta <table>.

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

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

Answer 4

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 5

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

Answer 6

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 para comentar: No, no se encontró nada mejor, simplemente se movió desde ese proyecto. :-)

Answer 7

He usado el complemento ordenable de jQuery UI con buenos resultados. Marcado similar a esto:

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

y luego en el 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
            }
        });
    }
});

Esto POSTS una versión serializada de los ID de los artículos 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 8

Si encuentra que .serialize () devuelve nulo en la solución de David Heggie, configure los valores de id para los TR 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".