javascript - 如何在 DataTable 中上下移动一行？

Question

我正在使用 JavaScript 库 DataTables显示数据。

我希望能够对行重新排序。我看到有一个名为 RowReorder 的扩展名但它似乎坏了，因为即使在网上找到的示例也不会重新排序行(至少在撰写本文时的最新版本的 Chrome 中是这样)。即使可行，我也不喜欢这个解决方案，因为不清楚您是否可以对行重新排序。

所以我想实现类似下图的东西:

我在网上找到了几个要求这样做的链接，但似乎没有人能让它正常工作。

我的数据源是一个简单的数组。还没有 Ajax 。我想从简单的开始。

这是你以前做过的事吗？关于如何开始构建该功能的任何方向？

Answer 1

感谢 David Konrad 在他的 answer on another question 中的指导关于如何在表格中间添加一行。

我做的第一件事是在我的表中创建一个 Action 列，然后动态添加 Up 或 Down 选项。

{
    name: 'action',
    data: null,
    title: 'Action',
    searchable: false,
    sortable: false,
    render: function (data, type, full, meta) {
        if (type === 'display') {
            var $span = $('<span></span>');

            if (meta.row > 0) {
                $('<a class="dtMoveUp">Up</a>').appendTo($span);
            }

            $('<a class="dtMoveDown">Down</a>').appendTo($span);

            return $span.html();
        }
        return data;
    }
}

然后，我在drawCallback 中添加了代码以移除最后一行的Down 箭头并将点击事件绑定(bind)到moveUp 和moveDown 函数:

'drawCallback': function (settings) {
    $('#ArgumentsTable tr:last .dtMoveDown').remove();

    // Remove previous binding before adding it
    $('.dtMoveUp').unbind('click');
    $('.dtMoveDown').unbind('click');

    // Bind click to function
    $('.dtMoveUp').click(moveUp);
    $('.dtMoveDown').click(moveDown);
}

然后我编写了上移/下移函数的代码。重要的是要注意我的数据有一个 order 属性，我用它来更改顺序。此 order 显示为第一列并使其成为默认排序列:

// Move the row up
function moveUp() {
    var tr = $(this).parents('tr');
    moveRow(tr, 'up');
}

// Move the row down
function moveDown() {
    var tr = $(this).parents('tr');
    moveRow(tr, 'down');
}

// Move up or down (depending...)
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 data2 = table.row(index + order).data();
    data2.order += -order;

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

    table.page(0).draw(false);
}

注意:重要的是要理解，当您要求 DataTable 再次draw() 您的表格时，它将使用您的数据根据​​参数对结果进行排序在 DataTable 定义中设置。这就是为什么我选择在这个例子中将 order 设置为第一列(默认排序)并直接更改我的数据对象(而不是使用 DataTable 的内部信息)。这让事情变得容易多了。

注意 2:真正您的数据由已按顺序排序的 DataTable 接收是很重要的。否则，此解决方案将无法正常工作。

您可以在此处查看完整的工作示例:

https://jsfiddle.net/kxfx489y/4/