i have single table grouped-by different 'categories'. table sortable using jquery sortable. however, want restrict sortable containment within each set of 'group-by' rows only. want prevent single rows sorting @ all.
so...
- 'oranges' rows dropped amongst themselves
- 'apples' row nothing
- 'peaches' rows dropped amongst themselves
sample 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"> </td></tr> <tr><td>apples</td><td>1</td><td>are good</td></tr> <tr><td colspan="3"> </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> this fails:
i'm guessing reason fails because creating object on each tablerow.
var $rows = $("td").filter(function () { return $(this).text().trim() === "oranges"; }).closest("tr"); $rows.sortable({ helper: function (e, tr) {}, stop: function(event, ui) {} });
you can group section in different tbody , call sortable on tbody. this:
<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"> </td></tr> <tr><td>apples</td><td>1</td><td>are good</td></tr> <tr><td colspan="3"> </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' }) 
Comments
Post a Comment