javascript - 如何根据行 ID 列表更改表中行的顺序？

Question

我有一个 ID 为 test_table 的表

<table id="test_table"> </table>

and or 有不同的id。

我已经订购了行的 id 列表

["name","value","description"]

与屏幕上呈现的表格有什么不同(用户可以即时设置新顺序，这就是我填充行 ID 列表的方式)。

如何根据有序列表在该表中设置新顺序？(解释:我有两个列表，用户可以在第一个表中拖放行，我需要在第二个表中有相同的顺序，第二个表中的 ID 与第一个 + 前缀“预览”中的 ID 相同。这就是我在第一个表中拖放的方式。 )

$("#cleanVert").tableDnD({
    onDragClass: "myDragClass",
    onDrop: function(table, row) {
        var rows = table.tBodies[0].rows;
        var debugStr = "New Order: ";
        var outStr = "";
        for (var i=0; i<rows.length; i++) {
            debugStr += rows[i].id+" ";
            outStr += rows[i].id;
            if(i<(rows.length-1)){
                outStr+=","
            }
        }
        $("#debugArea").html(debugStr);
    },
    onDragStart: function(table, row) {
        $("#debugArea").html("Started dragging row "+row.id);
    }
});

Answer 1

我想你是在客户端表排序之后，网上有很多可用的，这取决于你熟悉什么 javascript 库。我选择使用名为 tablesorter 的 jQuery 插件根据您的标签，我假设这对您来说也是一个不错的选择。

它的缺点是它只是客户端，所以如果用户没有启用 Javascript，他们将无法对表格进行排序，我想说这不是主要问题，平均而言用户始终启用 Javascript。

另一种选择是构建服务器端排序，这可以像添加一样简单

ORDER BY "$selectedField" "$order"

在您的数据库查询中。它还将确保它在没有 Javascript 的情况下工作。

现在许多流行的 Web 开发框架都提供了这种功能，如果您还没有发现它，我鼓励您看一下适合您的编程语言的一些选项。