我正在使用這個 jQuery UI 庫在 ASP.NET Core MVC 應用程式中拖放表的行。
腳本.js
$(function(){
$("#SortTable")
.sortable({ items: "tr.sortable" })
.dragtable({dragHandle: ".dragHandle"})
.tablesorter();
})
cshtml
<div class="table-responsive">
<table class="table" id="SortTable">
<thead>
<tr>
<th><div class="dragHandle"></div>A</th>
<th><div class="dragHandle"></div>B</th>
<th><div class="dragHandle"></div>C</th>
</tr>
</thead>
<tbody>
@foreach (var ticket in Model)
{
<tr class="sortable">
<td>@ticket.A</td>
<td>@ticket.B</td>
<td>@(ticket.C "(" ticket.abc ")")</td>
</tr>
}
</tbody>
</table>
</div>
如何向控制器發送請求并更新資料庫中的更改？
uj5u.com熱心網友回復：
“在資料庫級別重新排序行”總是一件棘手的事情。在斯特恩Brocot技術旨在使專案的重新排序，而只有具有更新資料庫中的單個行。
Stern-brocot
該理論基本上是，在使用分數時，將分子相加并將分母相加將產生一個新的分數，該分數始終介于其他兩個之間：
1 / 1 = 1
2 / 1 = 2
Now were dragging one in between
1 / 1 = 1
3 / 2 = 1.5
2 / 1 = 2
Now were adding yet another one in between
1 / 1 = 1
4 / 3 = 1.333
3 / 2 = 1.5
2 / 1 = 2
Now put another between the second and the third
1 / 1 = 1
5 / 4 = 1.25
4 / 3 = 1.333
3 / 2 = 1.5
2 / 1 = 2
這在理論上一切正常。數字不會像其他技術一樣迅速飆升，并且可以輕松存盤這些值。
不過我前段時間做了一個概念驗證，這清楚地表明了 Stern-brocot 技術的局限性。
雖然數字可以保持 100% 的準確度，但資料庫服務器只對特定“精度”進行數字計算（如果您使用帶有尾數和指數的雙精度數）。該演示清楚地表明，當您開始重新排序 10 件商品時，僅僅移動 47 次（如果您盡力而為），您就可能已經失去精度。
阿特拉斯
Atlassian 有一篇關于他們如何有效處理重新排序專案的博客文章。然而自動取款機。我找不到它。
uj5u.com熱心網友回復：
我的想法是沿著行 id 將新訂單推送到一個陣列中并將該陣列發送到后端，然后在您的后端您可以更新您的資料庫。我也參考這個高票答案來實作重置訂單功能。
試試我下面的代碼：
我的控制器：
public IActionResult Tickets()
{
List<TicketModel> list = new List<TicketModel>
{
new TicketModel{ rowid="aa", A="11",B="12",C="13",abc="hello"},
new TicketModel{ rowid="bb", A="21",B="22",C="23",abc="world"},
new TicketModel{ rowid="cc", A="31",B="32",C="33",abc="!!"}
};
return View(list);
}
[HttpPost]
public string resetOrder([FromBody] List<TicketModel> postData) {
return "success";
}
我的 cshtml：
@model IEnumerable<WebAppMvc.Models.TicketModel>
<div class="table-responsive">
<table class="table" id="myTable">
<thead>
<tr>
<th><div class="dragHandle"></div>A</th>
<th><div class="dragHandle"></div>B</th>
<th><div class="dragHandle"></div>C</th>
</tr>
</thead>
<tbody>
@{int i = 1;}
@foreach (var ticket in Model)
{
<tr class="sortable">
<td class="index" id="@ticket.rowid">@i</td>
@{i ;}
<td>@ticket.A</td>
<td>@ticket.B</td>
<td>@(ticket.C "(" ticket.abc ")")</td>
</tr>
}
</tbody>
</table>
<button id="updateBtn">update</button>
</div>
@section scripts{
<script src="~/js/jquery.ui.js"></script>
<script src="~/js/jquery.dragtable.js"></script>
<script src="~/js/jquery.tablesorter.min.js"></script>
<script>
$(function () {
var reslist = [];
var fixHelperModified = function (e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function (e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
//$(this).html(i 1);
var data = new Object();
data.rowid = $(this).attr("id");
data.order = (i 1).toString();
reslist.push(data);
console.info(reslist);
});
};
$("#myTable")
.sortable({
items: "tr.sortable",
helper: fixHelperModified,
stop: updateIndex
})
.dragtable({ dragHandle: ".dragHandle" })
.tablesorter();
});
$('#updateBtn').click(function(){
$.ajax({
url: "/home/resetOrder",
data: JSON.stringify(reslist),
type: "post",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
reslist = [];
}
});
});
</script>
}
我的型號：
public class TicketModel
{
public string rowid { get; set; }
public string A { get; set; }
public string B { get; set; }
public string C { get; set; }
public string abc { get; set; }
public string order { get; set; }
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/386293.html