Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/04/2011, 16:49
Avatar de Carxl
Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 17 años, 8 meses
Puntos: 70
Múltiple table drag and drop Plugin

Hola, hace un rato estoy intentando pero no logro hacer algo con un plugin.

El plugin en cuestión es Table Drag and Drop. En resumen, el plugin lo que hace es que te permite ordenar los registros de una tabla(<table>) mdiante drag and drop.

Tengo dos problemas con el plugin:

1. Las tablas en el proyecto pueden ser n cantidad (actualmente trabajo con dos y funciona perfecto). Porque van a ser tablas(<table>) generadas desde base datos. El problema en sí es la manera como se usa el plugin:

Código Javascript:
Ver original
  1. $("#table1").tableDnD({

Si van a ser tablas dinámicas, como "dinamizo" también el llamado del plugin para esa n cantidad de tablas? Al plugin toca pasarle el id de la tabla que va a usarlo :S

2. Para saber el orden que van seleccionando, el plugin cuenta con un método:

Código Javascript:
Ver original
  1. tableDnD.serialize()

Que es un arreglo que contiene los índices del orden y los id de los registros. Lo uso para hacer el ajax y pasarle el nuevo orden a la base de datos y realizar el update.

El problema viene que para recibir el post (el que genera ese método), debo llamar el id de la tabla que ordenaron, pero si logro hacer el llamado a tablas dinámicas, según yo, no sabría cuál es la tabla en cuestión que usaron.



Les dejo como tengo el javascript para que se hagan a una idea:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.         $("#table1").tableDnD({
  4.             onDragClass: "hhh",
  5.             onDrop: function(table, row){
  6.                 $.ajax({
  7.                     type: 'post',
  8.                     url: 'producto/ordenar.php',
  9.                     data: $.tableDnD.serialize(),
  10.                     success: function(data){
  11.                         if(data == 1) {
  12.                             var rows = table.tBodies[0].rows;
  13.                             for (var i=0; i<rows.length; i++) {
  14.                                 $('#table-products tr[id='+rows[i].id+'] td:first').html(i+1);
  15.                             }
  16.                         }
  17.                     },
  18.                     error: function() {
  19.                        
  20.                     }
  21.                 });
  22.             }
  23.         });
  24.  
  25.         $("#table2").tableDnD({
  26.             onDragClass: "hhh",
  27.             onDrop: function(table, row){
  28.                 $.ajax({
  29.                     type: 'post',
  30.                     url: 'producto/ordenar.php',
  31.                     data: $.tableDnD.serialize(),
  32.                     success: function(data){
  33.                         if(data == 1) {
  34.                             var rows = table.tBodies[0].rows;
  35.                             for (var i=0; i<rows.length; i++) {
  36.                                 $('#table-products2 tr[id='+rows[i].id+'] td:first').html(i+1);
  37.                             }
  38.                         }
  39.                     },
  40.                     error: function() {
  41.  
  42.                     }
  43.                 });
  44.             }
  45.         });
  46.     });
  47. </script>

Espero me haya hecho entender

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com

Última edición por Carxl; 02/04/2011 a las 16:56