Question

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

所以这个：

<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的click事件上使用$('.sortable').sortable('disable');，但它最终会禁用整个可排序的ui。

注意：我不想隐藏任何内容

基本上我想要这个：

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

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

Answer 1

我用list而不是表来测试它，它似乎工作。检查工作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');

在第二行禁用主列表后，您只能对子表列表进行排序

<强>更新找到了关于如何使用可排序表格的post 基本上将行放在<tbody class=content>中然后使用

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

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

1 个答案: