Jquery Datatable将一行从一个表拖放到另一个表

我正在使用jquery.dataTables.js，我正在尝试将行从一个表拖放到另一个表，反之亦然，从表2到table1，如下例所示： http ： //jsfiddle.net/yf47u/

上面的示例是json，所以我想用我的json样本做同样的工作。

这是我的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); }); }); 

Answer 1

以下是基于您的代码解决此问题的方法。 可以将行从一个表拖放到另一个表，但是我被迫动态更改FirstName列的值，因为否则表会考虑具有相同FirstName相等的两行，这在删除时会出现问题那些相同的行。 通常，在这种情况下，表应该具有唯一键。

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/