Блог

Главная - Вопросы по программированию - Есть ли способ использовать сортировку jQueryUI в таблице со скрытыми столбцами

Есть ли способ использовать сортировку jQueryUI в таблице со скрытыми столбцами

#jquery-ui #html-table #jquery-ui-sortable

Вопрос:

Недавно мне пришлось исправить странное поведение в таблице, в которой используется сортировка jQueryUI по строкам.

Когда я перетаскиваю и перемещаю строку, таблица сжимается.

После некоторых исследований я смог воспроизвести поведение на простом столе :

Ссылка на jsFiddle

 #sort2 .hidden {
  display: none;
}
.fullsize {
  width: 100%;
}
.fix30 {
  width: 30px;
}
    
.fix100 {
  width: 100px;
}
 
     <html>
      <body>
      <table id="sort1" class="fullsize">
      <thead><tr>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="fix30">Test1</th>
        <th>Test2</th>
        <th class="fix100">Test3</th>
        <th class="fix100">Test4</th>
        <th class="fix100">Test5</th>
      </tr></thead>
      <tbody>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
      </table>
      
      <hr />
      
        <table id="sort2" class="fullsize">
      <thead><tr>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="hidden">hide</th>
        <th class="fix30">Test1</th>
        <th>Test2</th>
        <th class="fix100">Test3</th>
        <th class="fix100">Test4</th>
        <th class="fix100">Test5</th>
      </tr></thead>
      <tbody>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td class="hidden">hide</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
      </table>
      
      </body>
    </html>
 
     var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
          $(this).width($originals.eq(index).width())
        });
        return $helper;
    };
    
    $("tbody").sortable({
        helper: fixHelperModified 
        
    }).disableSelection();

Я предполагаю, что когда некоторые столбцы скрыты, навигатор думает, что в строке больше колонок, чем в заголовке.

Мой вопрос : у кого-нибудь была такая же проблема и как ее исправить ?

Комментарии:

1. Движение предметов тела влияет на предметы головы. Я не могу наблюдать изменения, но я вижу, что они отображают разные размеры. Пытаюсь осмотреть каждую из них, когда я их перемещаю, но не вижу никаких изменений. Вы не хотели использовать таблицы данных?

2. @Twisty : Пример-это именно тот способ, который я нашел, чтобы воспроизвести проблему. Я должен выяснить, как это решить, потому что это происходит в гораздо более крупном приложении, над которым я работаю. Вот почему я не могу использовать таблицы данных. Мой вопрос состоял в том, почему таблица сжимается, когда некоторые колы скрыты, и можно ли это исправить.

3. Пока не удалось решить эту проблему. Нужны ли скрытые столбцы?

4. @Извилистый Да, есть … Но проблема не в этом … Если я удалю причину проблемы, конечно, проблемы не будет … Это не очень полезно, лол

Метки: