我正在学徒，我的老板给了我一个可以重新订购名单的挑战。
使用Jquery UI我添加了拖放功能，并添加了一个标签来显示每个项目的索引。
问题是我似乎无法将新订单保存回数据库。
这是转发器......
<asp:Repeater ID="RepeaterWorkOrder" runat="server" OnLoad="Repeater1_PreRender" DataSourceID="sqlwork">
<HeaderTemplate>
<ul id="headingRow" style="list-style-type:none; font-weight:bold;">
<li>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-3">Address</div>
<div class="col-xs-2">Service</div>
<div class="col-xs-1">Van</div>
<div class="col-xs-1">Remaining Visits</div>
<div class="col-xs-2">Order of Work</div>
</div>
</li>
</ul>
<ul id="sortable">
</HeaderTemplate>
<ItemTemplate>
<li class="ui-state-default" style="list-style-type:none; margin-top: 10px;" >
<div class="row">
<div class="col-xs-3"><asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "ItemIndex") %>' Visible="true"/> - <asp:Label ID="LabelWorkSheetId" runat="server" Text='<%# Eval ("WorkItemId") %>' Visible="true"></asp:Label> <asp:Label ID="LabelFirstNameEdit" runat="server" Text='<%# Eval ("FirstName") %>'></asp:Label> <asp:Label ID="LabelSurnameEdit" runat="server" Text='<%# Eval ("Surname") %>'></asp:Label></div>
<div class="col-xs-3"><asp:Label ID="LabelAddressLine1Edit" runat="server" Text='<%# Eval ("AddressLine1") %>'></asp:Label>, <asp:Label ID="LabelTownEdit" runat="server" Text='<%# Eval ("Town") %>'></asp:Label>, <asp:Label ID="LabelPostCodeEdit" runat="server" Text='<%# Eval ("PostCode") %>'></asp:Label></div>
<div class="col-xs-2"><asp:Label ID="LabelServiceEdit" runat="server" Text='<%# Eval ("Service") %>'></asp:Label></div>
<div class="col-xs-1"><asp:Label ID="LabelVanEdit" runat="server" Text='<%# Eval ("VanRegistration") %>'></asp:Label></div>
<div class="col-xs-1"><asp:Label ID="LabelRemainingVisits" runat="server" Text='<%# Eval ("RemainingVisits") %>'></asp:Label></div>
<div class="col-xs-2"><asp:TextBox ID="TextBoxOrder" runat="server" Text='<%# Eval ("DayWorkOrder") %>' Width="100px"></asp:TextBox></div>
</div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
这是Jquery UI脚本
<script>
function BindControlEvents() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
};
$(document).ready(function () {
BindControlEvents();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
});
</script>
当我加载网页时，我会得到一个项目列表并使用;
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "ItemIndex") %>' Visible="true"/>
它们每个都有一个索引号，所以列表显示为......
1
2
3
然后我将列表重新排序为
2
1
3
但是当我刷新页面时，它会再次加载原始订单。
我认为当我移动某些东西时，我需要有一个脚本来更改该项目的索引号，因此还需要更改其他所有项目？
答案 0 :(得分：0)
您需要将已排序的数据从视图回发回服务器，例如添加＆＃34;保存＆＃34;按钮。在该按钮onClick事件中，您应该从转发器获取项目并将重新排序的项目保存回数据库，因此当页面再次加载时，您的转发器将填充已排序的数据。 这里有一些代码可用于从转发器中检索数据：
foreach (RepeaterItem item in RepeaterWorkOrder.Items){
if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem){
// Here you can get values from each repeater item
}
}
答案 1 :(得分：0)
有一些因素需要思考，你可以这样做。
您的数据的排序编号是否受控制，是否需要分页？ 我不知道你这个页面有多少数据。如果数据只列出一个页面，则此页面中的数据不多。您可以使用一种简单的方法重新排序所有数据。
但是如果列表中有非常多的数据并且分页中有一些页面，那么您需要一个复杂的方法来重新排序这些数据。一个重要的因素是你的数据中的排序数字可以重复吗？如果可以重复排序号，可能在这个重新排序方法中有一些错误。
我创建了一个名为Resort.aspx的WebFrom。这段代码假设数据的排序数量是由程序自动创建的，而排序数字是唯一的。
这是一个简单的代码供您参考，这段代码的理论：
重新排序后，通过AJAX将所有数据项的id和page-index发布到后端URL;
后端方法获取data-id和page-index，计算每个日期项的新排序号;
这是Resort.aspx源代码：
<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeBehind="Resort.aspx.cs" Inherits="WebApplication1.Resort" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.box {
border-color: rgba(0,0,0,0.6) !important;
}
.move {
cursor: move;
}
.box li:hover {
background-color: rgba(0,0,0,0.3) !important;
}
#sortable {
list-style-type: none;
margin: 10px;
width: 450px;
border: 3px dotted #fff;
padding: 10px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 5px;
border: 1px solid rgba(0,0,0, 0.5);
background-color: rgba(255,255,255,1);
font-size: 12px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
var page = "<%=page%>";
$('.re-sort-btn').on("click", function (ev) {
ev.preventDefault();
var is_sortable = $("#sortable").sortable('instance');
$("#sortable").toggleClass("box");
$("#sortable li").toggleClass("move");
if (!is_sortable) {
$(this).text("Finish & Save!");
$("#sortable").sortable({
stop: function (event, ui) {
$("#sortable").attr("data-changed", true);
}
});
$("#sortable").disableSelection();
}
else {
$(this).text("Re-Sort");
$("#sortable").sortable('destroy');
if ($("#sortable").attr("data-changed")) {
var ids = [];
$("#sortable li").each(function (index, element) {
var id = $(this).attr("data-id");
ids.push(id);
});
console.log(ids);
$.ajax({
url: '?action=reorder',
type: 'POST',
async: true,
data: {
ids: ids.join(","), page: page
},
timeout: 5000,
dataType: 'json',
success: function (data, textStatus, jqXHR) {
console.log(data);
if (data["status"] === "ok") {
var txt = [];
for (var x in data["sorts"]) {
var t = data["sorts"][x];
for (var k in t)
txt.push(k + " : " + t[k]);
}
alert("new sort : \n" + txt.join("\n"));
}
else
alert("re sort error");
},
error: function (xhr, textStatus) {
console.log('error');
console.log(xhr);
console.log(textStatus);
}
});
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button class="re-sort-btn">Re-Sort</button>
<asp:Repeater runat="server" ID="repeater1">
<HeaderTemplate>
<ul id="sortable">
</HeaderTemplate>
<ItemTemplate>
<li data-id="<%# ((WebApplication1.Test)Container.DataItem).Id %>"><%# String.Format("{0}-{1} ::: old order is {2}",((WebApplication1.Test)Container.DataItem).Id, ((WebApplication1.Test)Container.DataItem).Name, ((WebApplication1.Test)Container.DataItem).Order) %>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
<%for (int i = 1; i < 10; i++)
{%>
<a href="?page=<%=i %>"><%=i %></a>
<%} %>
</div>
</form>
</body>
</html>
这是Resort.aspx.cs源代码
using System;
using System.Collections.Generic;
using System.Text;
namespace WebApplication1
{
public partial class Resort : System.Web.UI.Page
{
public int page = 0;
//datasource, you should access it from database.
private List<Test> test = new List<Test>();
protected void Page_Load(object sender, EventArgs e)
{
if (Request["action"] == "reorder")
{
ReOrder();
}
else
{
page = Convert.ToInt32(Request.QueryString["page"] ?? "1");
int i = 0, page_size = 20, max_page = 9;
while (i++ < page_size)
test.Add(new Test()
{
Id = (page - 1) * page_size + i,
Name = Guid.NewGuid().ToString("N"),
Order = (max_page + 1) * page_size - page * page_size - i + 1,
});
repeater1.DataSource = test;
repeater1.DataBind();
}
}
/// <summary>
/// This is reorder method, response ajax request.
/// If no pagination, easy more.
/// </summary>
protected void ReOrder()
{
int page = Convert.ToInt32(Request["page"] ?? "1");
int page_size = 20; // the number of one page show data
string[] ids = (Request["ids"] ?? "").Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
int max_page = 9; // max page of the data list
int i = 0;
StringBuilder sb = new StringBuilder();
sb.Append("{\"status\":\"ok\", \"sorts\":[ ");
foreach (var id in ids)
{
//below line code is calculate every data's order in now page
var sort_number = (max_page + 1) * page_size - page * page_size - i++;
sb.Append("{");
sb.AppendFormat("\"{0}\":{1}", id, sort_number);
sb.Append("},");
}
//save new sort-number to database
sb.Remove(sb.Length - 1, 1);
sb.Append("]}");
Response.Clear();
Response.AppendHeader("Content-Type", "application/json;charset=UTF-8");
Response.Write(sb.ToString());
Response.End();
}
}
/// <summary>
/// test class just for demo
/// </summary>
public class Test
{
public int Id { get; set; }
public string Name { get; set; }
public int Order { get; set; }
}
}