javascript - jQuery UI 可排序和表格/单元格大小

Question

我在使用 jQuery UI 的 sortable 时遇到问题。

我有一个表，其中的行遵循以下结构:

<tr style="background-color: rgb(255, 192, 203);">
    <input type="hidden" name="MyElement.index" autocomplete="off" value="748d4196-c12d-4c61-94f5-ad1a15eb279b">
    <td style="background-color:red;">
        <input type="hidden" id="MyElement_748d4196-c12d-4c61-94f5-ad1a15eb279b__ID" name="MyElement[748d4196-c12d-4c61-94f5-ad1a15eb279b].ID" />
        <input type="hidden" ... />
        <a href="..."> ... </a>
    </td>
    <td style="background-color:green;">
        <a href="..."> ... </a>
    </td>
    <td style="text-align: right; vertical-align: middle; width: 12.5%; background-color: blue">
        <a class="cancel-new-element" href="#" onclick="$(this).parent().parent().remove(); return false;" style="vertical-align: middle; margin-right: 15px;">
            <img src="/Images/icon_remove.png" alt="Remove Row"></a>
    </td>
</tr>

第一个隐藏的输入(名为'MyElement.index')来自Html.BeginCollectionItem()用于支持编辑可变长度列表的扩展方法，这种方法我以前用过几次，可以看到here或 here .基本上，它为模型/ View 模型中重复项(即集合中的项)的输入的名称和 ID 添加前缀，以便模型绑定(bind)知道哪个输入属于哪个嵌套对象。

我还在我的 jQuery UI sortable 中设置了自定义助手:

var myHelper = function (e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
};

所以the td's in the row being dragged keep their widths .

但是，我没有得到预期的效果，相反，当我拖动一行时，表格会缩小一点，我可以看到被拖动的行的单元格并没有真正保持它们的精确宽度。

1) 这是表格(tr 和 td 的背景已经着色以便更好地显示):

2) 最后一行正在被拖动。您可以看到表格大小减小并且 td 的宽度在拖动的行中发生变化。粉红色是该行的背景。

如果我不使用 BeginCollectionItem - 我需要使用它才能成功发布我的 ViewModel - 我不会遇到同样的问题。

我已尝试对我的 myHelper 函数进行多项修改。包括从 $helper 对象中移除隐藏的 input，但没有结果。

Answer 1

在这里找到我的解决方案:jquery UI Sortable with table and tr width (@Keith 的回答)。

// Fix the width of the cells
$('td, th', '#tableId').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});

$('#tableBodyId').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each td or th try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so td rather than tr
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

(JS fiddle here )

此外，每当我修改表格(例如追加新行......)时，我都会像这样清除宽度设置

// Clear the fixed widths: 
$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});

然后重新固定宽度。

归功于 @Keith , 为原始答案。