Question

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

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

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

HTML：

$(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);
  });
});

jquery的：

class Group(models.Model):
    name = models.CharField(max_length=50)

class Member(models.Model):
    name = models.CharField(max_length=50)
    group = models.ForeignKey(Group)

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/

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

1 个答案: