在Bootstrap表格中如何将行向上或向下移动

Question

我正在一个项目中使用Bootstrap-Table，希望能上下移动行。

我有以下操作事件：

window.actionEvents = {
'click .up': function (e, value, row, index) {
var thisrow = $(this).parents("tr:first"),
thisrow.prev().data('index', rowindex);
},
'click .down': function (e, value, row, index) {
var thisrow = $(this).parents("tr:first");
thisrow.insertAfter(thisrow.next());
},
}

它可以在屏幕上移动行，但由于行索引未更改，因此它的实际效果并不好...

因此我尝试更改行.data('index')，但它没有起作用...

有人成功移动行吗？

- Amandine

---

你能提供一个 Fiddle 吗？ - Guruprasad J Rao

这是代码片段：https://jsfiddle.net/dfpo899p/，如果您通过单击“+”或“-”移动行并按下按钮，则可以看到数据保持不变，并且如果我添加一个删除按钮，就会出现问题... - Amandine

Answer 1

这里有一些内容：

Fiddle：https://jsfiddle.net/dfpo899p/1/

Js：

window.actionEvents = {
    'click .up': function (e, value, row, index) {
        var source = JSON.stringify($('#table').bootstrapTable('getData')[index]);
        var target = JSON.stringify($('#table').bootstrapTable('getData')[index - 1]);
        $('#table').bootstrapTable('updateRow', {'index':index - 1, 'row': JSON.parse(source)});
        $('#table').bootstrapTable('updateRow', {'index':index, 'row': JSON.parse(target)});
        },
    'click .down': function (e, value, row, index) {
        var source = JSON.stringify($('#table').bootstrapTable('getData')[index]);
        var target = JSON.stringify($('#table').bootstrapTable('getData')[index + 1]);
        $('#table').bootstrapTable('updateRow', {'index':index + 1, 'row': JSON.parse(source)});
        $('#table').bootstrapTable('updateRow', {'index':index, 'row': JSON.parse(target)});
        }
}

- BENARD Patrick