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

Question

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

上面的示例与json一起使用，因此我想对json示例进行相同的工作。

这是我的jsfiddle：http : //jsfiddle.net/f7debwj2/12/

的HTML：

<br>
<br>
<h1>
 table1
</h1><br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>Order</th>
    </tr>
  </thead>
</table>

<br>
<br>
<h1>
 table 2
</h1><br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>checkbox</th>
    </tr>
  </thead>
</table>

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 = "<input type='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/