2

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

1 回答 1

0

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

1：MVVM

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

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

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

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

2：丑陋的烂摊子

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

该算法将如下所示：

  • 查找当前父 <tr>

    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();
}

  • 删除当前的 <tr> （从第一步开始）

    $(currTR).remove();

  • 将当前 <tr> 插入到第二步找到的最后一项上方（在 insertTR 上方

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

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

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

于 2013-08-20T17:38:00.293 回答