如何解决排序后如何发布列表的重新排列顺序?
问题的示例:
我认为这是因为列表项是在页面加载时以设置的顺序生成的,并且在更新UI时该顺序不会更改。有没有办法提交SortOrderOptions
的更新列表?
项目列表:
<div class="row">
<ul id="sortable" style="list-style: none; padding-left: 0px; width: 100%;">
@for (var x = 0; x < Model.sortOrderOptions.Count; x++)
{
<li style="width: 100%;">
<div class="row">
<div class="col-6" style="padding-left:30px;">
<label class="kt-checkBox kt-checkBox--brand"><input type="checkBox" asp-for="@Model.sortOrderOptions[x].sortBy" class="sortBox" /><span></span></label>
<label>@Model.sortOrderOptions[x].Name</label>
<input type="hidden" asp-for="@Model.sortOrderOptions[x].Name" value="@Model.sortOrderOptions[x].Name" />
</div>
<div class="col-3 center">
<label asp-for="@Model.sortOrderOptions[x].Subtotal">
<label class="kt-checkBox kt-checkBox--brand"><input type="checkBox" disabled="@(Model.sortOrderOptions[x].sortBy != true ? "disabled" : null)" asp-for="@Model.sortOrderOptions[x].Subtotal" class="subtotalBox" /><span></span></label>
</label>
</div>
<div class="col-3">
<label asp-for="@Model.sortOrderOptions[x].NewPage">
<label class="kt-checkBox kt-checkBox--brand"><input type="checkBox" disabled="@(Model.sortOrderOptions[x].sortBy != true ? "disabled" : null)" asp-for="@Model.sortOrderOptions[x].NewPage" class="newPageBox" /><span></span></label>
</label>
</div>
</div>
</li>
}
</ul>
</div>
<script src="~/libs/js/jquery.js"></script>
<script src="~/libs/jqueryui/jquery-ui.js"></script>
Javascript:
$("#sortable").sortable({
axis: "y",containment: "parent"
});
$('#submit').off('click').on('click',function (evt) {
var data = $('form').serialize();
var url = "@Context.Request.Path.Value.Replace("/Test","",StringComparison.OrdinalIgnoreCase)";
evt.preventDefault();
//Ajax form post
$.ajax({
type: 'POST',data: data,contentType: dataType,url: '@Url.Action("PBSCSubmit","Reports")',beforeSend: function(){
// Show loading spinner while processing
$('#loader').modal({
backdrop: 'static',keyboard: false
});
},success: function (data) {
if (data.success) {
//Success with warnings
if (data.warning) {
$('#loader').modal('toggle');
//Toggle the error modal and display messages
$('#errorsModal').modal('toggle');
//Add <br> tags when there is a linebreak in the string. This will add the line breaks into the HTML.
$('#errorsModal .modal-body p').html(data.message.replace(/(?:\r\n|\r|\n)/g,'<br>'));
//Open PDF on warning modal "OK" button click
$('#modalConfirm').on('click',function () {
window.open(url + "/ShowPDF?path=" + data.pdf,"_blank");
});
} else {
//Success without warnings
$('#loader').modal('toggle');
window.open(url + "/ShowPDF?path=" + data.pdf,"_blank");
if (data.csvCreated) {
window.open(url + "/DownloadFile?path=" + data.csv + "&fileName=" + CSVFileName,"_blank");
}
}
} else {
$('#loader').modal('toggle');
//Toggle the error modal and display messages
$('#errorsModal').modal('toggle');
//Add <br> tags when there is a linebreak in the string. This will add the line breaks into the HTML.
$('#errorsModal .modal-body p').html(data.message.replace(/(?:\r\n|\r|\n)/g,'<br>'));
}
},error: function (jqXHR) {
$('#loader').modal('toggle');
handleAjaxError(jqXHR);
}
});
});
控制器:
public IActionResult PBSCSubmit(PaymentsBySelectionCriteria report)
{
var convertedReport = new PaymentsBySelectionCriteria().ConvertToCriteria(report);
convertedReport.PathToProjectFile = reportPath;
var path = Path.GetDirectoryName(env.WebrootPath) + "\\pdfs\\" + Guid.NewGuid() + ".pdf";
var csvPath = Path.GetDirectoryName(env.WebrootPath) + "\\csvs\\" + Guid.NewGuid() + ".csv";
var reportModel = new ReportPaymentsBySelection();
if (convertedReport.CreateCSVFile == true)
{
convertedReport.CSVFileName = csvPath;
}
reportModel.CreateReportAsPDFOrAddToQueue(convertedReport,path,loggedInUserID,out Notification notification,out bool addedToQueue);
//Add the report to the process queue
if (addedToQueue == true)
{
return Json(new
{
success = false,message = "The report has been added to the queue."
});
}
if (notification.HasErrors)
{
return Json(new
{
success = false,message = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)
});
}
return Json(new
{
success = true,warning = notification.HasWarnings,message = notification.GetConcatenatedWarningMessage(Environment.NewLine + Environment.NewLine),pdf = path,csvCreated = convertedReport.CreateCSVFile,csv = csvPath
});
}
解决方法
我为此创建了一个新属性来跟踪索引,从而提出了自己的解决方案。我创建了一些隐藏的输入,并为每个输入添加了类sort-index
。
public class SortOrder
{
public string Name { get; set; }
public bool SortBy { get; set; }
public bool Subtotal { get; set; }
public bool NewPage { get; set; }
public int SortIndex { get; set; }
}
单击提交按钮后,我将更新隐藏的索引输入,以重新排序到UI中的当前位置。
//Update the SortIndex value of each sort order option
$(".sort-index").each(function (i,el) {
//console.log("Index: " + i + ". Value: " + $(this).val());
//Set the value of the sort index input to the index
$(this).val(i);
});
,
您可以使用HTML表格以一种方法执行此操作
- 在表中创建相同的东西
- 然后允许用户拖放列表
- 最后使用javascript将表行作为列表获取
以上列表将按用户排列,我将在下面添加示例代码 您可以根据需要对该列表进行排序,然后点击“ ClickMe”按钮
此代码仅供参考,与您的代码不同
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Easy Drag and Drop HTML Table Rows With jQuery</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container">
<table class="table table-striped table-hover" id="tbl">
<thead class="thead-dark">
<tr>
<th>Row</th>
<th>Name</th>
<th>ID Number</th>
<th>Location</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Rahim Hawkins</td>
<td>1640060874099</td>
<td>Bursa</td>
<td>May 29,2017</td>
</tr>
<tr>
<td>02</td>
<td>Carter James</td>
<td>1672062705399</td>
<td>Geer</td>
<td>Mar 30,2019</td>
</tr>
<tr>
<td>03</td>
<td>Merritt Fernandez</td>
<td>1669120981299</td>
<td>Gooik</td>
<td>Jun 3,2017</td>
</tr>
<tr>
<td>04</td>
<td>Ross Robbins</td>
<td>1640092139299</td>
<td>Lint</td>
<td>Mar 22,2018</td>
</tr>
<tr>
<td>05</td>
<td>Allistair Warren</td>
<td>1690102625999</td>
<td>Bicester</td>
<td>Dec 22,2017</td>
</tr>
<tr>
<td>06</td>
<td>Yoshio Finch</td>
<td>1643051322099</td>
<td>Baulers</td>
<td>Sep 15,2018</td>
</tr>
<tr>
<td>07</td>
<td>Wylie Holland</td>
<td>1662122249099</td>
<td>Penicuik</td>
<td>Apr 22,2018</td>
</tr>
<tr>
<td>08</td>
<td>Maxwell Lindsay</td>
<td>1637021237499</td>
<td>St. John's</td>
<td>Nov 30,2018</td>
</tr>
<tr>
<td>09</td>
<td>Orson Schneider</td>
<td>1610061567599</td>
<td>Gresham</td>
<td>Mar 7,2018</td>
</tr>
<tr>
<td>10</td>
<td>Ahmed Puckett</td>
<td>1626021923499</td>
<td>Valbrevenna</td>
<td>Jul 20,2018</td>
</tr>
</tbody>
</table>
<button onclick="fun()">ClickMe</button>
</main><!-- /.container -->
<!-- Bootstrap & Core Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('tbody').sortable();
function fun(){
var table = document.getElementById("tbl");
var noOfrows=table.rows.length;
var res = new Array(noOfrows);
for (var i=0;i<noOfrows;i++){
res[i]=table.rows[i].cells[0].innerHTML;
}
alert(res);
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。