jquery - 如何使用 Jquery Sortable 将选中的复选框排序到顶部？

Question

我正在使用 Jquery Sortable 来允许用户对几个表行进行排序。

我需要做的是，当用户选中一个复选框时，它将被排序到顶部。

基本上选中的项目位于顶部，未选中的项目位于底部。

我在此处包含了指向工作代码的 jfiddle 链接。有人敢于挑战吗？

http://jsfiddle.net/z74VH/3/

这是 html:

<table border="1" cellpadding="5" cellspacing="2" id="sort">
<thead>
    <tr>
        <td>active</td>
        <td>title</td>
        <td>order</td>
    </tr>
</thead>
<tbody>
    <tr id="1">
        <td><input type="checkbox" id="active_1" checked="checked"/></td>
        <td>First Item</td>
        <td><input type="text" id="order_1" value="1"/></td>
    </tr>
    <tr id="2">
        <td><input type="checkbox" id="active_2" /></td>
        <td>Second Item</td>
        <td><input type="text" id="order_2" value="2"/></td>
    </tr>
    <tr id="3">
        <td><input type="checkbox" id="active_3" /></td>
        <td>Third Item</td>
        <td><input type="text" id="order_3" value="3"/></td>
    </tr>
</tbody>

这是调用 Jquery Sortable 的 javascript:

//Call the sortable jquery on the table
$("#sort tbody").sortable({
    helper: fixHelperModified
}).disableSelection();

Answer 1

有两种方法可以解决这个问题:

1:MVVM

现在，您有简单的 DOM 对象 - 一个具有多行和列的表格。

为了让它正确、顺利、可靠地工作，您需要将数据从表示中分离出来。这意味着，您需要创建一个 JavaScript 对象数组来存储数据，然后创建一个“渲染”方法来动态创建表。

每当数据发生变化时(无论是通过拖动可排序项还是通过单击复选框来更改数据)，您都需要重新呈现表格以显示新的排序顺序。

有几个库可以帮助您做到这一点(Backbone、Ember、Knockout 等)

2:丑陋的困惑

如果您选择对此进行硬编码，那么您将需要使用 jQuery 编写一个丑陋的算法来将该项目推送到非复选框项目的顶部。

算法看起来像这样:

• 查找当前父级

  var currTR = $(this).closest("tr");
  

• 在循环中，转到上一项，直到找到一个复选框处于选中状态的项

  var prevTR = currTR.prev();
  var insertTR = currTR;
  while(prevTR !== null) {
      if ($(prevTR).find("input:checked").length > 0) {
          break;
      }
      insertTR = currTR;
      prevTR = prevTR.prev();
  }
  

• 删除当前的 (从第一步开始)

  $(currTR).remove();
  

• 将当前的 插入到第二步找到的最后一项上方(insertTR 上方)

注意:这几乎都是伪代码——根本不能保证工作!

此外，您还需要保护自己，以防其中没有其他已选中的项目或当前行已位于列表顶部或未选中项目的顶部。

就我个人而言，我建议现在作为迁移到 JavaScript 框架的最佳时机。