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>

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

我也在我的jQuery UI中设置一个自定义助手可排序:

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;
};

这样被拖动的行中的td保持其宽度.

但是,我没有得到所需的效果,相反,当我拖动一行时,表缩小了一点,我可以看到被拖动的行的单元格并没有真正保持它们的确切宽度.

1)这是表格(tr和td的背景已经着色以获得更好的可视化):

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

如果我不使用BeginCollectionItem- 我需要为了成功发布我的ViewModel - 我没有得到同样的问题.

我已经尝试了几个修改我的myHelper功能.包括input从$helper对象中删除隐藏,没有结果.

Answer 1

在这里找到我的解决方案:jquery UI可以使用table和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小提琴在这里)

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

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

然后重新修复宽度.

幸得@Keith,对于原来的答复.