Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Múltiple table drag and drop Plugin

Estas en el tema de Múltiple table drag and drop Plugin en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/04/2011, 16:49
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 10 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
  #2 (permalink)  
Antiguo 02/04/2011, 17:35
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 13 años, 5 meses
Puntos: 845
Respuesta: Múltiple table drag and drop Plugin

Que tal Carxl,

yo creo que si le asignas una clase css en común va a funcionar bien, por ejemplo todas las tablas dinámicas tienen la clase serializable, luego con hacer:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('.serializable').tableDnD({
  3.         ...
  4.      });
  5. });

debería funcionar.

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #3 (permalink)  
Antiguo 02/04/2011, 19:17
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 10 meses
Puntos: 70
Respuesta: Múltiple table drag and drop Plugin

Damn! Cómo no se me ocurrió? Claro esa es la solución :) Con eso soluciono lo primero :D

Para lo segundo, como comenté, el plugin entrega todos los datos haciendo referencia al id de la tabla, me imagino, que debo de alguna manera obtener el id que está presente en el atributo id de la tabla y pasarlo como post.

Crees que es así?

Gracias por tu ayuda
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #4 (permalink)  
Antiguo 02/04/2011, 19:31
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 13 años, 5 meses
Puntos: 845
Respuesta: Múltiple table drag and drop Plugin

El id en las tablas no es obligatorio para el funcionamiento del plugin, esta linea

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

detecta la tabla sobre la que estas haciendo el drag & drop, y hace el serialize sobre la misma, ahora me imagino que vos necesitas el id para saber donde guardar no ?, bueno con crearlo desde PHP, no precisarías mas nada, el plugin te va a generar el string con la tabla y el resto de datos serializados.

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #5 (permalink)  
Antiguo 02/04/2011, 19:33
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 10 meses
Puntos: 70
Respuesta: Múltiple table drag and drop Plugin

Sí claro, es para hacer uso de los debidos registros...

Entiendo lo que me dices, déjame intento y te cuento

Gracias!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #6 (permalink)  
Antiguo 02/04/2011, 20:04
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 10 meses
Puntos: 70
Respuesta: Múltiple table drag and drop Plugin

Hola de nuevo...

Probé lo que me dijiste y efectivamente el plugin manda un variable con el id de la tabla que estás usando que contiene un array. Si no le colocas id a la tabla, pues no envía datos.

Algo así:

Código txt:
Ver original
  1. <pre>Array
  2. (
  3.     [table2] => Array
  4.         (
  5.             [0] =>
  6.             [1] => 15
  7.             [2] => 14
  8.         )
  9.  
  10. )
  11. </pre>
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #7 (permalink)  
Antiguo 02/04/2011, 20:26
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 13 años, 5 meses
Puntos: 845
Respuesta: Múltiple table drag and drop Plugin

Si pero el problema ahi no es del plugin, es de json, no se puede crear un json a partir de un nombre vacio, este es el string cuando falla

[]=1&[]=2&[]=3

no es correcto, deberia ser algo asi:

tabla[]=1&tabla[]=2&tabla[]=3

para solventar esto, podes hacer algo asi:

Código Javascript:
Ver original
  1. ...
  2. var str = $.tableDnD.serialize().replace(/\[/g, 'tabla[');
  3. $.ajax({
  4.     type: 'post',
  5.     url: 'proxy.php',
  6.     data: str,
  7.     success: function(data){
  8.         if(data == 1) {
  9.             var rows = table.tBodies[0].rows;
  10.             for (var i=0; i<rows.length; i++) {
  11.                 $('#table-products tr[id='+rows[i].id+'] td:first').html(i+1);
  12.             }
  13.         }
  14.     },
  15.     error: function() {
  16.  
  17.     }
  18. });
  19. ...

aunque ahora me perdí un poco, porque en tu caso siempre generarías el id de la tabla a través de PHP no ?
__________________
http://es.phptherightway.com/
thats us riders :)
  #8 (permalink)  
Antiguo 03/04/2011, 09:18
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 10 meses
Puntos: 70
Respuesta: Múltiple table drag and drop Plugin

Hola de nuevo...

Masterpuppet, usé lo que me dijiste y lo adapté a lo que necesito y quedó de la siguiente manera:

Código Javascript:
Ver original
  1. var str = $.tableDnD.serialize().replace(/table[0-9]*/g, 'tablar');

Osea que en el post siempre recibo la misma variable "tablar"

No sé como lo ves? Me funciona bien.

Una cosa más, si se puede, como se puede obtener el id de la tabla que están usando? Se puede?

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

Última edición por Carxl; 03/04/2011 a las 09:39
  #9 (permalink)  
Antiguo 03/04/2011, 13:33
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 13 años, 5 meses
Puntos: 845
Respuesta: Múltiple table drag and drop Plugin

Hola,

creo que no nos estamos entendiendo, o yo me perdí, si la tabla tiene id, no necesitas esto:

Código Javascript:
Ver original
  1. var str = $.tableDnD.serialize().replace(/table[0-9]*/g, 'tablar');

el serialize automaticamente te crea el string con el id de la tabla activa, fuera de esto para obtener la tabla activa es con:

Código Javascript:
Ver original
  1. var activeTable = $.tableDnD.currentTable;

si queres obtener el id seria algo así:

Código Javascript:
Ver original
  1. var activeTableId = $.tableDnD.currentTable.id;

o a través de jQuery,

Código Javascript:
Ver original
  1. var activeTableId = $($.tableDnD.currentTable).attr('id');

y ten en cuenta que en el onDrop el primer parámetro es la tabla y le podes hacer tabla.id o $(tabla).attr('id');

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #10 (permalink)  
Antiguo 04/04/2011, 22:34
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 10 meses
Puntos: 70
Respuesta: Múltiple table drag and drop Plugin

Hola @masterpuppet.

Respecto a lo que me comentas, de no necesitar la línea que me convierte a "tablar" el id que está siendo usado; si la necesito, para dejar un nombre de la tabla en general y así poder usarla en php. Osea, que siempre recibo la variable "tablar", sin importar el id propio de la tabla usada.

Gracias por mostrarme como leer el id de la tabla usada, me sirvió a la perfección

Ya todo quedó resuelto con la ayuda que me pretaste

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

Etiquetas: drag, drop, múltiple, plugin, table
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:12.