将可排序包含限制为 Table 中的特定行

Question

我有一个 table grouped-by 个不同的 'categories'。 table 将使用 jQuery Sortable 排序 table。但是，我想将 sortable 包含限制在每组 'group-by' 行内。我还想完全阻止 SINGLE 行排序。

所以...

'Oranges' 行只会在它们之间删除
'Apples'行什么都不做
'Peaches' 行只会在它们之间删除

样本 TABLE:

<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 上调用可排序。像这样：

<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'
})

将可排序包含限制为 Table 中的特定行

Restricting Sortable Containment to Specific Rows in a Table

javascript

jquery

jquery-ui-sortable