Microsoft AjaxToolkits 28. ReorderList控件

ReorderList控件是一个多功能的可拖动的数据控件,类似于DataList,GridView,Repeater等数据控件。都可以绑定数据,并支持模板并允许自定义显示行即用户可以任意拖动行到其它位置。同时还支持客户端排序。

属性列表:
DataSourceID:绑定的数据源控件的ID
DragHandleAlignment:可拖动控件显示的位置
ItemInsertLocation:插入数据后数据的显示位置
DataKeyField:数据源的主键
SortOrderField:排序的字段
AllowReorder:是否支持记录的拖动,如果已经设置了ReorderTemplate,此属性默认为TRUE.
ItemTemplate:显示数据的模板
ReorderTemplate:用户选择了拖动记录后的模板
DragHandleTemplate:显示拖动位置的模板
InsertItemTemplate:添加记录时的模板
EmptyListTemplate:空记录时的模板
PostbackOnReorder:页面是否回调,如果执行添加和删除操作时,此属性必须为enabled.


实例解析一、实现数据的绑定和添加
注意(数据表上ID必须是主键,必须提供排序字段TITLE。排序字段必须在EditItemTemplate模板中绑定。)

<head runat="server">
<title>无标题页</title>
<style>
.droptemplate{
border:dashed thin black;
width:100%;
heigth:25px
}
.draghandle{
width:10px;
height:15px;
background-color:Blue;
cursor:move;
border:outset thin white;
}
.item{
margin-left:15px;
font-family:Arial,Verdana,sans-serif;
font-size:lem;
text-align:left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<cc1:ReorderList ID="ReorderList1" runat="server" AllowReorder="True" DataSourceID="SqlDataSource1"
PostBackOnReorder="False" DataKeyField="id" SortOrderField="title">
<ItemTemplate>
<div class="item"> <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("title") %>'></asp:Label></div>
</ItemTemplate>
<EditItemTemplate>
<div class="item"><asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("title") %>'></asp:TextBox></div>
</EditItemTemplate>
<ReorderTemplate>
<asp:Panel ID="Panel1" runat="server" CssClass="droptemplate"></asp:Panel>
</ReorderTemplate>
<DragHandleTemplate>
<div class="draghandle"></div>
</DragHandleTemplate>
<InsertItemTemplate>
<div>
<asp:Panel ID="Panel2" runat="server" DefaultButton="Button1">
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("title") %>'></asp:TextBox>
<asp:Button ID="Button1" runat="server" CommandName="Insert" Text="add" />
</asp:Panel>
</div>
</InsertItemTemplate>
</cc1:ReorderList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:myworkdataConnectionString %>"
DeleteCommand="DELETE FROM [news] WHERE [id] = @id" InsertCommand="INSERT INTO [news] ([title]) VALUES (@title)"
SelectCommand="SELECT [id], [title] FROM [news]" UpdateCommand="UPDATE [news] SET [title] = @title WHERE [id] = @id">
<DeleteParameters>
<asp:Parameter Name="id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="title" Type="String" />
<asp:Parameter Name="id" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="title" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
</form>
</body>

posted @ 2012-05-24 23:13  烧点饭  阅读(182)  评论(0编辑  收藏  举报