Блог

У меня есть таблица, которая поддается сортировке. В каждой строке есть ссылка, которая динамически загружает другую сортируемую таблицу (она расширяет строку). Проблема, с которой я сталкиваюсь, заключается в том, что если вы не нажмете в нужной конкретной области, вы все равно сможете отсортировать всю динамически отсортированную таблицу, потому что она все еще находится в сортируемой строке родительской таблицы. Что я хочу сделать, так это отключить сортировку в родительской таблице при загрузке новой таблицы.

Итак, это:

 <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').sortable('disable'); событие click, которое загружает sortable_subtable, но это просто приводит к отключению всего сортируемого пользовательского интерфейса.

Примечание: Я не хочу ничего скрывать

в принципе, я хочу это:

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

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

Я тестировал это со списком вместо таблиц, и, похоже, это работает. Проверьте рабочий пример 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');
  

После того, как вторая строка отключит основной список, вы можете отсортировать только список вложенных таблиц

ОБНОВЛЕНИЕ Найдено сообщение о том, как использовать таблицы с sortable.
В основном помещаем строки внутрь <tbody class=content>
затем используйте

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