现在的位置: 首页 > 综合 > 正文

ReorderList

2012年10月17日 ⁄ 综合 ⁄ 共 3277字 ⁄ 字号 评论关闭

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>

抱歉!评论已关闭.