如何在表之间交换行后正确重新排序 ID(jQuery 和 ASP.NET MVC4)
How to properly reorder ids after exchange rows between tables (jQuery and ASP.NET MVC4)
我这里有一个视图模型,它有两个列表对象。我将在我的视图中将它们显示为两个表。我已经为他们创建了 EditorFor。我将放置四个按钮(向右移动一个,向右移动一个,向左移动一个,向左移动一个)用于交换操作。我到处搜索,没有关于如何实现的目标,因为我需要移动整个对象,替换所有 "name" 和 "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();
}
仅在提交表单之前使用索引计算和设置 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
});
};
我这里有一个视图模型,它有两个列表对象。我将在我的视图中将它们显示为两个表。我已经为他们创建了 EditorFor。我将放置四个按钮(向右移动一个,向右移动一个,向左移动一个,向左移动一个)用于交换操作。我到处搜索,没有关于如何实现的目标,因为我需要移动整个对象,替换所有 "name" 和 "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();
}
仅在提交表单之前使用索引计算和设置 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
});
};