jQuery Girl
  1. jQuery Girl
  3. JQuery datatable glisser et déposer une ligne d’une table à une autre
Intereting Posts
Pourquoi ce plugin JQuery n’a-t-il pas besoin d’une cale pour fonctionner? Comment créer un minuteur JQuery spécialisé retourne la classe li cliquée dans un ul javascript / jquery jQuery Switch Case Plugin? Plugin de défilement lisse ne me permettant pas de faire défiler la page % 5Bobject% 20Object% 5D (404 non trouvé) lors d’une tentative de soumission via AJAX Ajax Call avec Post en PHP Modifier plusieurs lignes dans la grid jQuery de Struts2 via la modification en ligne Obtenir l’URL complète, y compris le hachage avec un contenu en JavaScript “$ (Document) .on” ne se déclenchant pas après event.stopPropagation et “$ (a) .on” ne se déclenchant pas pour les nouveaux éléments Passer une chaîne de variable comme clé dans un littéral d’object javascript jQuery: Trouver un mot et changer toutes les quelques secondes jquery: option plus classe et cliquez sur Essayer de combiner deux étendues avec jQuery, nécessite de l’aide pour boucler / itérer la bascule de démarrage ne fonctionne pas après le chargement ajax

JQuery datatable glisser et déposer une ligne d’une table à une autre

J’utilise jquery.dataTables.js et j’essaie de faire glisser des lignes d’une table à une autre et vice-versa d’une table à une autre, comme ceci: http://jsfiddle.net/yf47u/

L’échantillon ci-dessus était avec json, je voudrais donc faire le même travail avec mon échantillon json.

c’est mon jsfiddle: http://jsfiddle.net/f7debwj2/12/

html: 


 
 
 table1 

 
 
  
 First name Place Order 
  
 
 
 
 table 2 

 
 
  
 First name Place checkbox

jquery: 

 $(document).ready(function() { var dt = $('#example').dataTable(); dt.fnDestroy(); }); $(document).ready(function() { var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; var table = $('#example').DataTable({ ajax: url, createdRow: function(row, data, dataIndex) { $(row).attr('id', 'row-' + dataIndex); }, rowReorder: { dataSrc: 'order', }, columns: [{ data: 'order' }, { data: 'name' }, { data: 'place' }] }); table.rowReordering(); }); $(document).ready(function() { var dt = $('#example2').dataTable(); dt.fnDestroy(); }); $(document).ready(function() { var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2'; var table = $('#example2').DataTable({ ajax: url, createdRow: function(row, data, dataIndex) { $(row).attr('id', 'row-' + dataIndex); }, rowReorder: { dataSrc: 'order', }, columns: [{ data: 'order' }, { data: 'name' }, { data: 'checkbox' }] }); table.rowReordering(); }); $(document).ready(function() { $('body').on('mouseenter', 'input', function() { $('.btn').prop('disabled', true); }); $('body').on('mouseout', 'input', function() { $('.btn').prop('disabled', false); }); });

Voici ma solution à ce problème en fonction de votre code. Il est possible de glisser-déposer des lignes d’une table à l’autre, mais j’ai été contraint de modifier les valeurs de la colonne Prénom de manière dynamic, car sinon une table considérerait deux lignes avec un Identique identique identique, ce qui poserait un problème lors de la suppression d’une colonne. de ces lignes identiques. En règle générale, les tables doivent avoir une clé unique dans de tels cas.

JavaScript: 

  var rowCache; $(document).ready(function() { var dt = $('#example').dataTable(); dt.fnDestroy(); }); $(document).ready(function() { var dt = $('#example2').dataTable(); dt.fnDestroy(); }); $(document).ready(function() { rowCache = []; var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; var table = $('#example').DataTable({ ajax: url, createdRow: function(row, data, dataIndex) { $(row).attr('id', 'row-' + dataIndex); }, rowReorder: { dataSrc: 'order', }, columns: [{ data: 'order' }, { data: 'name' }, { data: 'place' }] }); table.rowReordering(); table.on('mousedown', 'tbody tr', function () { var $row = $(this); var r = table.rows(function (i, data) { return data.order == $row.children().first().text(); }); if (r[0].length > 1) r = r.rows(r[0][0]); rowCache.push({ selector: 'example', row: r }); }); table.on('mouseup', mouseUp); }); $(document).ready(function() { var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2'; var table = $('#example2').DataTable({ ajax: url, createdRow: function(row, data, dataIndex) { $(row).attr('id', 'row-' + dataIndex); }, rowReorder: { dataSrc: 'order', }, columns: [{ data: 'order' }, { data: 'name' }, { data: 'checkbox' }] }); table.rowReordering(); table.on('mousedown', 'tbody tr', function () { var $row = $(this); var r = table.rows(function (i, data) { return data.order == $row.children().first().text(); }); if (r[0].length > 1) r = r.rows(r[0][0]); rowCache.push({ selector: 'example2', row: r }); }); table.on('mouseup', mouseUp); }); function mouseUp(event) { var id = $(document.elementsFromPoint(event.clientX, event.clientY)) .filter('table') .attr('id'); if (id && event.currentTarget.id != id) { rowCache.every(function (el, i) { if (el.selector != id) { var data = el.row.data(); if (data.length > 0) { if (!data[0].checkbox) data[0].checkbox = "" el.row.remove().draw(); var $target = $("#" + id).DataTable(); if ($target.rows()[0].length > 0) { var rowsArray = $target.rows().data().toArray(); data[0].order = rowsArray[rowsArray.length - 1].order + 1; } else data[0].order = 1; $target.rows.add(data.toArray()).draw(); } }} ); } rowCache = []; } $(document).ready(function() { $('body').on('mouseenter', 'input', function() { $('.btn').prop('disabled', true); }); $('body').on('mouseout', 'input', function() { $('.btn').prop('disabled', false); }); });

JSFiddle: http://jsfiddle.net/jahn08/f7debwj2/34/