Как остановить Jquery сортируемую таблицу от изменения размера ячейки таблицы - PullRequest
Новая
       24

Как остановить Jquery сортируемую таблицу от изменения размера ячейки таблицы

0 голосов
/ 14 июля 2020

У меня есть сортируемая таблица в jQuery. Я могу перетаскивать строки вверх и вниз, и таблица обновляется правильно, et c. Все это хорошо.

Проблема в том, как выглядит таблица при ее перетаскивании. Например, вот моя таблица предварительного перетаскивания:

enter image description here

As you can see, the headers are split onto two lines using "\n" (second line is just the placeholder "New line" for now). And the columns are a nice, pleasant size.

When I go to move a row though, the table warps like so:

введите описание изображения здесь

Как видите, заголовки потеряли свою способность новой строки (кажется, что «\ n» исчезло, и теперь оно ломается там, где заканчивается место). Кроме того, столбцы стали намного шире, чем были раньше.

Из-за этого вся таблица выглядит очень нервной, потому что не только строка перемещается / меняет размер, но и вся таблица.

Однажды Я отбрасываю строку, таблица возвращается к своему обычному "красивому" виду.

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

Есть ли способ сохранить постоянный размер таблицы во время перемещения строки? Я пробовал устанавливать ширину в CSS, фиксированные размеры и т.д. c., Но ничего не работает.

Вот мой соответствующий код HTML, Javascript и CSS. : 

<table class='custom_table sortableTable' 
       style='display:inline-block; vertical-align: top; table-layout: fixed;'>
    
    <thead class='sortableTableHead'>
        <tr> <th>20200619.1\nNew line</th> <th>20200709.10\nNew line</th> </tr>
    </thead>
    
    <tbody class='sortableTableBody'>
        <tr> <th>Metric 1</th> <td>0</td> <td>0</td> </tr>
        <tr> <th>Metric 2</th> <td>0.01279</td> <td>0.01017</td> </tr>
    </tbody>
    
</table>


jQuery(".sortableTableBody").sortable({
        
    // What to do if we move a row around by hand
    deactivate: function(event, ui) { // Triggered when sorting stops
        console.log("Done sorting");
    }
});


.custom_table {
    color: white;
    border-spacing: 10px;
    border-collapse: separate;
}

.custom_table th {
    text-align: center;
}

.custom_table tbody th {
    max-width: 30vw;
    overflow-y: hidden;
    text-align: right;
    cursor: move;
}

.custom_table thead th {
    cursor: pointer;
}

.custom_table td {
    width: 100px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    cursor: move;
}
...