Arrastrar y soltar la ordenación de las columnas de la tabla con jQuery

Question

Estoy usando jQuery para conducir mi interfaz de usuario AJAX. Tengo una tabla de datos y quiero permitir que el usuario reordene las columnas en la tabla arrastrándolas y soltándolas. Me gustaría que el usuario pueda tomar el encabezado de una columna y moverlo. La fila de datos debajo debe seguir. Tenga en cuenta que estoy no interesado en ordenar los datos o en reordenar filas, pero permitiendo que el usuario cambie el orden de las columnas.

¿Existe una solución existente? Intenté usar la llamada clasificable jQuery estándar en los elementos <th>, pero por supuesto eso no funciona. Busqué en el sitio de complementos de jQuery y no encontré nada. ¿Tendré que escribir un plugin jQuery?

Editar: Tenga en cuenta que jQuery, Dojo, etc. (los gratuitos) son realmente la única opción para un marco JS. No puedo obtener una licencia para nada comercial como ExtJS.

Answer 1

Si está dispuesto a pagar una licencia, puede probar Ext JS en lugar de jQuery. Hay algunas características de cuadrícula bastante poderosas que incluyen lo que estás tratando de hacer.

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

Answer 2

Usted debe tratar Dragtable by Danvk

me encontré con esta pregunta durante la búsqueda de una solución a un error en él sin embargo. No le gustan las tablas colocadas en paneles que se desplazan horizontalmente.

Aparte de esto, es fantástico.

Answer 3

La biblioteca de UI jquery ordenable parece hacer exactamente lo que usted desea aquí.

https://github.com/dbrink/sorttable/wiki http://plugins.jquery.com/project/sorttable

Answer 4

quiere decir algo como esto? Table Drag and Drop JQuery plugin

Answer 5

Hay un widget de IU de JQuery llamado Dragtable.

Live demo

Answer 6

Aquí es otro que construye en la parte superior de la biblioteca jquery-ui http://akottr.github.io/dragtable/

Answer 7

probar este lugar:

$('.sort').sortable({ 
 
    cursor: 'move', 
 
    axis: 'y', 
 
    update: function(e, ui) { 
 
    $(this).sortable('refresh'); 
 
    var params = {}; 
 
    params = $('.id').serializeArray(), 
 
     $.ajax({ 
 
     type: 'POST', 
 
     data: { 
 
      id : params 
 
     }, 
 
     url: 'Your url', 
 
     success: function(msg) { 
 
      // Your sorted data. 
 
     } 
 
     }); 
 
    } 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<table class="table table-striped table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>abc</th> 
 
     <th>xyz</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="sort"> 
 
    <tr> 
 
     <input class="id" name="id" type="hidden" value="Your Value" /> 
 
     <td class="center"><span>Text Here</span></td> 
 
     <td>Yes, you are done</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Foo</td> 
 
     <td>Bar</td> 
 
    </tr> 
 
    </tbody> 
 
</table>