javascript - 将可排序包含限制为表中的特定行

Question

我有一个表 grouped-by 不同的 'categories'。该表将可以使用 jQuery Sortable 进行排序。但是，我想将可排序包含限制在每组“分组依据”行内。我还想完全阻止 SINGLE 行排序。

所以...

• “橙子”行只会在它们之间被删除
• “苹果”行什么都不做
• 'Peaches' 行只会在它们之间被删除

样本表:

<table class="table-o-stuff">
    <thead>
        <tr><td>Category</td><td>Order</td><td>Value</td></tr>
    </thead>
    <tbody>
        <tr><td>Oranges</td><td>1</td><td>Are Good</td></tr>
        <tr><td>Oranges</td><td>1</td><td>Are Okay</td></tr>
        <tr><td>Oranges</td><td>1</td><td>Are Bad</td></tr>
        <tr><td colspan="3">&nbsp;</td></tr>
        <tr><td>Apples</td><td>1</td><td>Are Good</td></tr>
        <tr><td colspan="3">&nbsp;</td></tr>
        <tr><td>Peaches</td><td>1</td><td>Are Okay</td></tr>
        <tr><td>Peaches</td><td>1</td><td>Are Bad</td></tr>
        <tr><td>Peaches</td><td>1</td><td>Are Good</td></tr>
    </tbody>
</table>

这绝对失败了:
我猜这失败的原因是因为它在每个 TableRow 上创建了一个对象。

var $rows = $("td").filter(function () {
                return $(this).text().trim() === "Oranges";
            }).closest("tr");

$rows.sortable({
    helper: function (e, tr) {},
    stop: function(event, ui) {}
});

Answer 1

您可以将您的部分分组在不同的 tbody 中，并在 tbody 上调用 sortable。像这样:

<table class="table-o-stuff">
    <thead>
        <tr><td>Category</td><td>Order</td><td>Value</td></tr>
    </thead>
    <tbody >
        <tr><td>Oranges</td><td>1</td><td>Are Good</td></tr>
        <tr><td>Oranges</td><td>1</td><td>Are Okay</td></tr>
        <tr><td>Oranges</td><td>1</td><td>Are Bad</td></tr>
    </tbody>
        <tr><td colspan="3">&nbsp;</td></tr>
        <tr><td>Apples</td><td>1</td><td>Are Good</td></tr>
        <tr><td colspan="3">&nbsp;</td></tr>
    <tbody >
        <tr><td>Peaches</td><td>1</td><td>Are Okay</td></tr>
        <tr><td>Peaches</td><td>1</td><td>Are Bad</td></tr>
        <tr><td>Peaches</td><td>1</td><td>Are Good</td></tr>
    </tbody>
</table>

$('tbody').sortable({
    containment: 'parent',
    items: 'tr'
})