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

【问题标题】：How to sort checked checkboxes to the top using Jquery Sortable?如何使用 Jquery Sortable 将选中的复选框排序到顶部？
【发布时间】：2013-08-20 16:53:14
【问题描述】：

我正在使用 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();

【问题讨论】：

标签： jquery checkbox jquery-ui-sortable

【解决方案1】：

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

1：MVVM

现在，您拥有简单的 DOM 对象——一个包含多行和多列的表。

要使其正确、平稳、可靠地工作，您需要将数据与表示分离。这意味着，您需要创建一个 javascript 对象数组来存储数据，然后使用“render”方法来动态创建表。

当数据发生变化时（无论是通过拖动排序对象还是通过单击复选框来更改数据），您都需要重新渲染表格以显示新的排序顺序。

有几个库可以帮助您做到这一点（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 框架的最佳时机。
【讨论】：
- 实际上，这些项目已经从 PHP 动态生成。像 order1, order2 .. 等。这将如何与 javascript 框架和 jquery 结合使用？我不得不说，这个解决方案看起来很有趣。
- javascript 框架将位于中间。在页面加载时，它会提取数据并显示它。您的 PHP 不会直接生成 HTML，而是会为前端生成数据。链接：Using Knockout.js with PHP。另外，Introduction to KnockoutJS。（我随机选择了 KO。我自己使用 Backbone。）最终，它是关于将数据与表示分离。它让生活轻松了 10 倍。