javascript - 上下移动行后如何在数据表中保留复选框 "checked"

Question

我有一个数据表，其中的每一行都有一个复选框和用于移动行的向上或向下按钮。但是，如果我选中一个复选框，然后移动该行，则复选框将更改为未选中状态。

如何防止此事件并保持选中该复选框？

{ name: 'name',
  data: 'name',
  title: 'Name',
  searchable: true,
  sortable: false,
  render: function (data, type, full, meta) {
    if (type === 'display') {
        var $span = $('<span></span>');
       $('<input type="checkbox">').appendTo($span);
       return $span.html();
    }
    return data;
  }
},

这是我的代码:jsFiddle

Answer 1

您可以将状态保存在变量中，绘制表格后可以检查和更新复选框的状态

fiddle https://jsfiddle.net/jdvusytn/1/

function moveRow(row, direction) {
    var index = table.row(row).index();

    var order = -1;
    if (direction === 'down') {
       order = 1;
    }

    var data1 = table.row(index).data();
    data1.order += order;
    var data1Checked = $(table.row(index).node()).find('input[type=checkbox]').prop('checked');

    var data2 = table.row(index + order).data();
    data2.order += -order;
    var data2Checked = $(table.row(index + order).node()).find('input[type=checkbox]').prop('checked');

    table.row(index).data(data2);
    table.row(index + order).data(data1);

    table.page(0).draw(false);
    $(table.row(index + order).node()).find('input[type=checkbox]').prop('checked', data1Checked);
    $(table.row(index).node()).find('input[type=checkbox]').prop('checked', data2Checked)
}