jquery之具有可扩展行的可排序表

我是 jquery/rails 新手，我在使用 .sortable() 时遇到问题。我有可扩展的行，但似乎无法获得正确的代码来使隐藏行(即子行)与可见行(即父行)保持一致。相关JS代码:

(function($){ 
    $.fn.jSortable = function(){ 
 
 
    var element = this; 
 
    var fixHelper = function(e, ui) { 
        ui.children().each(function(){ 
            $(this).width($(this).width()); 
        }); 
        return ui; 
    }; 
 
    $(element).sortable({ 
        helper: fixHelper, 
        axis: "y", 
        cursor: "move", 
        items: "tr.odd2", 
        distance: "30" 
 
    }); 
    $(element).disableSelection(); 
}; 
 
})(jQuery); 

父行的类为 odd2，子行的类为 child。

应用 .sortable() 时将两行锁定在一起的正确方法是什么？

我目前使用的是 Rails 3.1.1 和 jquery-rails 1.0.19

编辑:

这是相关的html

<table id="sortableTable"> 
  <tr class= 'headings'> 
        <th><%= sortable "number" %></th> 
        <th><%= sortable "customer_id" %></th> 
        <th><%= sortable "priority" %></th> 
        <th><%= sortable "quantity" %></th> 
        <th><%= sortable "due_date" %></th> 
        <th></th> 
  </tr> 
 
<% @jobs.each do |job| %> 
  <tr class= "odd2"> 
    <td><%= job.number %></td> 
    <td><%= job.customer %></td> 
    <td><%= job.priority %></td> 
    <td><%= job.quantity %></td> 
    <td><%= job.due_date %></td> 
    <td><%= button 'Edit', edit_job_path(job) %></td> 
  </tr> 
 
  <tr class= "child"> 
    <td><%= job.job_items %></td> 
  </tr> 
 <% end %> 
</table> 
 
<%= javascript_tag do %> 
$(document).ready(function(){ 
    $('#sortableTable tbody').jSortable(); 
}); 
 
<% end %> 

编辑 2:我已将我的应用程序更新为 Rails 3.2.1 和 jquery-rails 2.0.0

编辑3:由于没有人提供表格标签而不是div的解决方案，而且我还没有找到任何适用于表格的内容，所以我被迫更改为div。

请您参考如下方法:

似乎这就是您想要的:http://jqueryui.com/demos/sortable/#portlets

如果没有，请发布您的 HTML，以便更容易看到您正在尝试执行的操作。

具体来说，请注意可排序项目是一个 div 并具有用于子项的 div。

<div class="portlet"> 
    <div class="portlet-header">Feeds</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div>