Question

我试图找出如何移动行并针对它们设置排序值。

我有一个非常简单的表格布局。数据是从我无法控制的后端管理系统传递的。

我的表最终看起来像这样：

<table id='sites'>
<tr id="0" data-site="SITE:1" data-order="1" data-siteid="12456232" class="site_heading nodrag"><td>SITE1
<td><span id='up'>Up</span> / <span id='down'>Down</span></td></tr>


<tr id="5" data-site="SITE:3" data-order="3" data-siteid="78565213" class="site_heading nodrag"><td>SITE3
<td><span id='up'>Up</span> / <span id='down'>Down</span></td></tr>


<tr id="8" data-site="SITE:4" data-order="4" data-siteid="36587492" class="site_heading nodrag"><td>SITE4
<td><span id='up'>Up</span> / <span id='down'>Down</span></td></tr>

<tr id="6" data-site="SITE:2" data-order="2" data-siteid="02365874" class="site_heading nodrag"><td>SITE2
<td><span id='up'>Up</span> / <span id='down'>Down</span></td></tr>

</table>

我显示的行是部分行，表格中可能还有其他行，但这些是我目前唯一感兴趣的行。

每行都有一个唯一的ID，一个data-site和一个data-order。由于信息可以按任何顺序传递给脚本，因此我使用以下内容使用data-order属性对行进行排序：

var $table=$('#sites');
var rows = $table.find('tr.site_heading').get();
rows.sort(function(a, b) {
    var keyA = $(a).attr('data-order');
    var keyB = $(b).attr('data-order');
    if (!keyA || !keyB) return -1;
    if (keyA > keyB) return 1;
    if (keyA < keyB) return -1;
    return 0;
});

可以看到工作HERE

每一行都需要能够向上移动订单，然后更新它data-order。这很简单，因为我一次只移动一行，有效地交换两行位置。

如果我向上移动一行，我会将data-order值与上面移动的行交换，如果我向下移动一行，则将其与行data-order交换它移到了下面。

这一切都很有效......直到我得到没有data-order值的行。由于没有可比较的属性，因此这些行不会被订购。我需要能够向上或向下移动一行并为其分配下一个订单值。

我创建了一个新的FIDDLE，它显示了同一个表，但有3个新行没有分配数据顺序值。

如果我移动任何没有分配数据顺序值的网站，他们应该获得下一个数据顺序值（5），除非他们交换的位置有一个分配了数据顺序值的行，然后他们应该得到那个值，他们交换的行得到下一个值（5）。

如果向下移动则反过来..

有没有人有任何想法我怎么能这样做？感谢

Answer 1

解决方案是“{强制”data-order sort上的data-order 以下是我重写代码的方式：
（从包含空行$(document).ready(function() { var $table = $('#sites'); var rows = $table.find('tr.site_heading').get(); function RowOrder() { rows.sort(function(a, b) { var keyA = $(a).attr('data-order'); var keyB = $(b).attr('data-order'); if (!keyA || !keyB) return -1; if (keyA > keyB) return 1; if (keyA < keyB) return -1; return 0; }); $.each(rows, function(index, row) { $table.children('tbody').append(row);//.attr("data-order", index+1); }); // Set data-order $.each(rows, function(index, row) { $(this).attr("data-order", index+1); }); } RowOrder(); $('.up').on('click', function() { var thisRow = $(this).closest("tr"); var prevRow = $(this).closest("tr").prev(".site_heading"); newOrder = prevRow.attr("data-order"); oldOrder = thisRow.attr("data-order"); thisRow.attr("data-order", newOrder); prevRow.attr("data-order", oldOrder); RowOrder(); }); $('.down').on('click', function() { var thisRow = $(this).closest("tr"); var nextRow = $(this).closest("tr").next(".site_heading"); oldOrder = thisRow.attr("data-order"); newOrder = nextRow.attr("data-order"); thisRow.attr("data-order", newOrder); nextRow.attr("data-order", oldOrder); RowOrder(); }); });的3行的小提琴开始）

.up

正如你所看到的......有许多微小的变化我在您的脚本的“排序部分”中创建了一个功能，因此我们可以通过.down和id点击来调用它。

data-order必须是唯一的...这就是为什么这些上/下链接现在是类。

您可以在Fiddle上看到它点击F12并选择一行以查看new MongoClient()属性更改。

jquery - 移动表行，分配订单值

1 个答案: