Question

我有一张grouped-by张不同的'categories'表。该表将使用jQuery Sortable进行排序。但是，我想将可排序的包含限制在每组'group-by'行中。我还想阻止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>

这绝对失败：
我猜测这个失败的原因是因为它在EACH 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'
})

将可排序的遏制限制为表中的特定行

1 个答案: