使用 TBody 和 JQuery Sortable 时折叠表格行

Question

这不是您对 JQuery UI 的 Sortable 的标准用法。我不是对表格行进行排序，而是对 tbody 标签进行排序，它一次移动多行。当您移动一组行时，行的列宽会折叠。通常你会使用帮助器来保持列宽......但是标准的在这种情况下不起作用。

这是jsFiddle。

您可以在移动 tbody 选择时看到宽度折叠。

以下代码通常适用于帮助程序的单个行，但不适用于带有行的 tbody。

$('table').sortable({
    cursor: 'move',
    items: 'tbody',
    helper: function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    },
    forcePlaceholderSize: true, 
    placeholder: 'placeholder'
});

有人可以帮忙想出一个在使用 Tbody 标签时保持宽度的助手吗？

Answer 1

不要问我为什么，但是 jQuery 删除了 <tr> 元素上的 display: table; 并将其替换为 display: block;。因此你的折叠宽度。只需使用 jQuery UI 添加到表格的帮助器类，同时将其拖动以更改显示。

.ui-sortable-helper tr {
    display:table;
}

干杯！