Question

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

我希望能够重新排序行。我看到有一个名为RowReorder的扩展名，但它似乎已被破坏，因为即使在线发现的示例也不会对行重新排序（至少在撰写本文时最新版本的Chrome中）。即使它有效，我也不喜欢这个解决方案，因为您不能清楚地重新排序行。

所以我想实现如下图像：

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

我的数据源是一个简单的数组。还没有阿贾克斯。我想从简单开始。

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

Answer 1

感谢大卫康拉德从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箭头，并将点击事件绑定到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 ：已经按order排序的DataTable收到您的数据真的非常重要。否则，此解决方案将无法正常工作。

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

<强> https://jsfiddle.net/kxfx489y/4/

如何在DataTable中向上或向下移动行？

1 个答案: