ReorderList控件 - 爱码网

功能：
在页面中呈现出一个由数据绑定自动生成的条目列表。用户可以通过鼠标拖动某一项来直接改变该列表中条目彼此之间的相对位置关系，且在拖动的过程中，ReorderList控件提供了丰富的、可定制的视觉效果。当用户在某个位置放开鼠标之后，ReorderList控件也将同样会自动通知与其绑定的数据源控件，以Ajax的异步或整页回送的同步方式更新服务器端数据。

属性：

DataSourceID：页面中某个DataSource控件的ID，用于通过数据绑定自动生成列表项目。
DataKeyField：数据源中键字段的名称，该字段中的值应该在所右记录中是唯一且不变的，ReorderList将用条目中该字段的值作为记录的标志，将在更新/删除中使用。
AllowReorder：是否允许用户对列表中的项目进行重新排序，若指定了<ReorderTemplate>，则该属性将自动被设置为true。
SortOrderField：数据源中作为排序字段的名称。在用户进行重新排序之后，ReorderList将自动修改需要更新的条目的该字段
DragHandleAlignment：条目的可拖动区域与条目之间的相对位置关系。可选Top（上部）、Bottom（下部）、Left（左边）和Right（右边）。
PostBackOnReorder：若设置该属性值为true，则当用户对列表中的项目进行重新排序之后，将自动引发一次整页的回送。否则将以异步回调的方式向服务器端发送请求。
EditItemIndex：列表中当前处于编辑模式下的项目的索引值。
ShowInsertItem：若该属性值为true，则列表中将显示出一个用来添加新条目的特殊行，即<InsertItemTemplate>模版中定义的内容。
ItemInsertLocation：插入的新行在整个列表中的位置。可选Beginning（第一项）或End（最后一项）。
<ItemTemplate>：该标签内将定义列表中普通条目的模版。
<DragHandleTemplate>：该标签内将定义列表条目中可拖放区域的模版。用户只有在该区域中拖拽才能够对该条目进行重排序。
<ReorderTemplate>：该标签内将定义拖动列表条目时列表中可投放区域的模版。
<InsertItemTemplate>：该标签内将定义用来添加新条目的特殊行的模版。
<EditItemTemplate>：该标签内将定义处于编辑状态中的列表条目的模版。
<EmptyListTemplate>：该标签内将定义空列表的模版。若列表中没有任何条目，则将显示出该模版中定义的内容。

代码实例：

<html xmlns="http://www.w3.org/1999/xhtml">
ReorderList控件

<head runat="server">
ReorderList控件

<title>Demonstrating AjaxToolkit ReorderList</title>
ReorderList控件

</head>

<body>

<form id="form1" runat="server">
ReorderList控件

<asp:ScriptManager ID="ScriptManager1" runat="server" />
ReorderList控件

<div class="ClsReorderListContainer">
ReorderList控件

<ajaxToolkit:ReorderList ID="rlWorkItems" runat="server"
ReorderList控件

DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority"
ReorderList控件

EnableViewState="true"
ReorderList控件

OnItemReorder="rlWorkItems_ItemReorder"
ReorderList控件

CallbackCssStyle="ClsCallBackStyle"
ReorderList控件

<ItemTemplate>
ReorderList控件

<div class="ClsItemArea">
ReorderList控件

<table style="width:100%;">
ReorderList控件

<tr>

<td class="ClsItem">
ReorderList控件

<asp:Label ID="Title" runat="server" Text='<%# Eval("Title") %>'></asp:Label> ：
ReorderList控件

<asp:Label ID="Description" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
ReorderList控件

</td>

</tr>

</table>

</div>

</ItemTemplate>
ReorderList控件

<ReorderTemplate>
ReorderList控件

<asp:Panel ID="Panel2" runat="server" CssClass="ClsReorderCue">
ReorderList控件

</asp:Panel>
ReorderList控件

</ReorderTemplate>
ReorderList控件

<DragHandleTemplate>
ReorderList控件

<div class="ClsDragHandle"></div>
ReorderList控件

</DragHandleTemplate>
ReorderList控件

</ajaxToolkit:ReorderList>
ReorderList控件

</div>

<asp:Button ID="btnSubmit" runat="server" Text="Submit Changes" OnClick="btnSubmit_Click" />
ReorderList控件

<div id="divMessage" runat="server" style="border:solid 2px red;margin-top:30px;">
ReorderList控件

</div>

</form>

</body>

</html>

后台代码：

protected void Page_Load(object sender, EventArgs e)
}

完成后台操作的辅助类：

public class WorkItem

public class WorkItemsHelper

运行结果：