jQuery ui 可排序，2 个可排序表，在使用另一个表时禁用其中一个

Question

我有一个可排序的表格。每行内都有一个链接，可动态加载另一个可排序表（它扩展该行）。我遇到的问题是，如果您不单击正确的特定区域，您仍然可以对整个动态排序表进行排序，因为它仍在父表的可排序行中。我想要做的是在加载新表时禁用父表上的可排序。

所以这个：

<table class="sortable">
   <tr><td><a class="load" href="#">load content</a></td></tr>
   <tr><td><a class="load" href="#">load content</a></td></tr>
</table>

变成这样：

<table class="sortable">
  <tr><td>
    <table class="sortable_subtable">
       <tr><td>loaded content row 1</td><tr>
       <tr><td>loaded content row 2</td><tr>
    </table>        
  </td></tr>
  <tr><td><a class="load" href="#">load content</a></td></tr>
</table>   

我尝试在加载 sortable_subtable 的点击事件上使用 $('.sortable').sortable('disable'); ，但它最终只是禁用了整个可排序的用户界面。

注意：我不想隐藏任何东西

基本上我想要这个：

$('.sortable, .sortable_subtable').sortable();

$('.load').click(function(e){
     //disable sortable on '.sortable' only 
     //loads dynamic content into table row, expanding row
    });

Answer 1

我用列表而不是表格对此进行了测试，它似乎有效。检查工作 jfiddle 示例。

它看起来像这样

<ul class="sortable">
<li><a class="load" href="#">load content 1</a></li>
<li>
<ul class="sortable_subtable">
  <li><a class="load" href="#">loaded content row 1</a>
  <li><a class="load" href="#">loaded content row 2</a></li>
</ul>    
</li>
<li><a class="load" href="#">load content 3</a></li>
</ul>   

脚本：

$('.sortable, .sortable_subtable').sortable();
$('.sortable').sortable('disable');

第二行禁用主列表后，您可以仅对子表列表进行排序

UPDATE
找到了一篇关于如何使用表格的帖子可排序。
基本上将行放入
然后使用

$("#tableId tbody.content").sortable();