Question

我有一个具有固定行布局的表。每行都有唯一的标识符。从数据库返回数据时，它对该表中的行具有不同的顺序。返回的数据与固定布局中存在的索引相同，因此我可以在固定表中找到匹配的行。我需要移动固定表格布局中的行以匹配数据中的行顺序。

表格布局：

<table>
    <tr id="a1"><td>Some Value1</td></tr>
    <tr id="a2"><td>Some Value2</td></tr>
    <tr id="a3"><td>Some Value3</td></tr>
    <tr id="a4"><td>Some Value4</td></tr>
    <tr id="a5"><td>Some Value5</td></tr>
</table>

因此，如果数据库中的订单是a3，a4，a5，我需要表格看起来像这样。

<table>
    <tr id="a3"><td>Some Value1</td></tr>
    <tr id="a4"><td>Some Value2</td></tr>
    <tr id="a5"><td>Some Value3</td></tr>
    <tr id="a1"><td>Some Value4</td></tr>
    <tr id="a2"><td>Some Value5</td></tr>
</table>

是否可以逐行移动索引，或者如果我克隆行，将其移动到特定的行索引，然后用这样的东西删除旧的行/位置。

var clonedRow = $("#tbl_lp_Forms > tbody > tr[class=" + myformurl + "] ").clone(true);
$('#tbl_lp_Forms tr:first').before(clonedRow);

希望你能帮忙！

Answer 1

首先 - 如果你想要移动行，你不需要克隆它。当你选择一些html元素并将其附加/添加到其他地方时，它将从旧位置移除 - 这就是DOM的工作方式。所以根据你写的html，当你这样做时：

var $table = $('table');
$table.prepend($('#a3'));

然后id为“a3”的行将从其旧位置移除并放在表格的开头。

如果我们假设您有要获得订单的数组：

var order = ['a3', 'a4', 'a5', 'a1', 'a2'];

然后根据这个表对行进行排序，你必须简单地从这个数组中的最后一个元素进行迭代，从表中获取当前id的行，并将它放在开头，如下所示：

var order = ['a3', 'a4', 'a5', 'a1', 'a2']; 
var $table = $('table');        

for (var i = order.length; --i >= 0; ) {
    $table.prepend($table.find('#' + order[i]));
}

当你想要移动一行并放在其他行之前时：

var $rowa = $('#a1');
var $rowb = $('#a5');
$rowb.insertBefore($rowa);

// or even like this
$('#a5').insertBefore('#a1');

Answer 2

为什么要尝试在JS中进行排序？只需在保存时保存数据库中的排序顺序，然后在选择要返回时显示的数据时ORDER BY该列。您可以通过将索引放在1：M表中并将其连接到主数据表来规范化，或者可以将其存储为主数据表本身中具有分隔符的非规范化字符串（不推荐）。

将索引移动到新位置

2 个答案: