如何在表之间交换行后正确重新排序 ID（jQuery 和 ASP.NET MVC4）

Posted 2023-05-07

【中文标题】如何在表之间交换行后正确重新排序 ID（jQuery 和 ASP.NET MVC4）

【英文标题】：How to properly reorder ids after exchange rows between tables (jQuery and ASP.NET MVC4)

【发布时间】：2015-04-14 12:55:52

【问题描述】：

我这里有一个视图模型，它有两个列表对象。我将在我的视图中将它们显示为两个表。我已经为他们创建了 EditorFor。我将放置四个按钮（向右移动一个、向右移动一个、向左移动一个、向左移动一个）用于交换操作。我到处都用谷歌搜索，但没有关于如何实现的目标，因为我需要移动整个对象，替换所有“名称”和“id”标签，重新排序索引等等，因为这样我的列表将正确发布。我也在使用 Datatables.net 和 jQuery。

有人知道如何做到这一点吗？ 先感谢您。代码如下

编辑 由于 ASP.NET MVC 上的列表元素被索引为“ListName_0__Code”（用于 Id）和“ListName[0].Code”（用于名称），如何正确地重新排序这些索引？

EditorFor

@model ViewModels.UserPermissionDetails

<tr id="@Model.Id">
    <td>
        @html.HiddenFor(m => m.Code)
        @Html.HiddenFor(m => m.Login)
        @Html.HiddenFor(m => m.Name)
        @Html.HiddenFor(m => m.IdEmpUser)
        @Html.DisplayFor(m => m.Code)
    </td>
    <td>@Html.DisplayFor(m => m.Login)</td>
    <td>@Html.DisplayFor(m => m.Nome)</td>
</tr>

查看

<table id="tbBlock">
    <thead>
        <tr>
            <th>Code</th>
            <th>Login</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @Html.EditorFor(model => model.BlockList)
    </tbody>
</table>
<table id="tbAllow">
    <thead>
        <tr>
            <th>Code</th>
            <th>Login</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @Html.EditorFor(model => model.AllowList)
    </tbody>
</table>

交换方法（jQuery）

function addElement(OriginTableId, DestinyTableId, OriginListName, DestinyListName) 
    var originTb = $(OriginTableId).DataTable(); //initialize DataTable.Net for origin table
    var destinyTb = $(DestinyTableId).DataTable(); //initialize DataTable.Net for destiny table
    var objectLine = $('#' + originTb.$('tr.selected').attr('id')); //get selected line that will be moved

    //Name replacing code piece
    var elementsFromLine = $(objectLine.children()[0]).children().toArray();
    elementsFromLine.forEach(function (item, index, array) 
        $(item).attr('id', $(item).attr('id').replace(OriginListName, DestinyListName)); //Replace 'OriginListName_0' with 'DestinyListName_0'
        $(item).attr('name', $(item).attr('name').replace(OriginListName, DestinyListName)); //Replace 'OriginListName[0]' with 'DestinyListName[0]'
    );

    //Reordering code piece here, how to?

    $(DestinyTableId + ' tbody').append(objectLine.clone(true, true));
    objectLine.parent().remove();

【参考方案1】：

仅在提交表单之前使用索引计算和设置name 值会更容易，而不是每次移动操作。

@Html.HiddenFor(m => m.Code, new  @class = "code"  )
// same for all the inputs you send to server


$("button[type='submit']").on("click", function (e) 
    e.preventDefault();

    updateIndexes();
    $("form").submit();
);

function updateIndexes() 
    $("#tbAllow").find("tbody").children("tr").each(function (i) 
        var prefix = "BlockList[" + i + "].";
        var $tr = $(this);

        $tr.find("input.code").attr("name", prefix + "Code");
        $tr.find("input.login").attr("name", prefix + "Login");
        // same for all the inputs you send to server
    );
;

【讨论】：

感谢您回答@RaraituL。我会试试这个。所以，如果我尝试这种方式，我不需要为每次移动更新这些 id 和名称（将 'AllowList' 替换为 'BlockList'）？

不，您不必这样做。此外，请确保正确创建索引（索引必须从 tblAllow 的 0 开始，在 tblBlock 上，它需要从具有 tblAllow 的最后一项的任何索引继续。此外，将其映射回 @987654326 @，你只需要name属性，id也不需要

谢谢@RaraituL。我做了一些调整，现在一切正常。