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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架