Terry's blog

Focus on bigdata and cloud.
博客园 首页 新随笔 联系 订阅 管理
ReorderList控件

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

属性：

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

代码实例：   

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demonstrating AjaxToolkit ReorderList</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div class="ClsReorderListContainer">
        <ajaxToolkit:ReorderList  ID="rlWorkItems" runat="server"
                DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority"
                EnableViewState="true"
                OnItemReorder="rlWorkItems_ItemReorder"
                CallbackCssStyle="ClsCallBackStyle"          
                >
                    <ItemTemplate>
                        <div class="ClsItemArea">
                            <table style="width:100%;">
                            <tr>
                                <td class="ClsItem">
                                    <asp:Label ID="Title" runat="server" Text='<%# Eval("Title") %>'></asp:Label> ：
                                    <asp:Label ID="Description" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
                                </td>                                
                            </tr>
                            </table>
                        </div>
                    </ItemTemplate>
                    <ReorderTemplate>
                        <asp:Panel ID="Panel2" runat="server" CssClass="ClsReorderCue">
                        </asp:Panel>
                    </ReorderTemplate>
                    <DragHandleTemplate>
                        <div class="ClsDragHandle"></div>
                    </DragHandleTemplate>
             </ajaxToolkit:ReorderList>      
        </div>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit Changes" OnClick="btnSubmit_Click" />
        
        <div id="divMessage" runat="server" style="border:solid 2px red;margin-top:30px;">        
        
 
        </div>
        
    </form>    
</body>
</html>

后台代码：
  protected void Page_Load(object sender, EventArgs e)
    {
        //Bind the ReorderList - its a must
        rlWorkItems.DataSource = WorkItemsHelper.GetWorkItems();
        rlWorkItems.DataBind();
    }

    protected void rlWorkItems_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
    {
        //Item Reordered, so save the current order to the application scope
        WorkItemsHelper.SaveWorkItems((List<WorkItem>)rlWorkItems.DataSource);
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        //Show the current order
        divMessage.InnerHtml = "New Order <hr />";
        foreach (WorkItem item in WorkItemsHelper.GetWorkItems())
        {
            divMessage.InnerHtml += item.ToString()+"<br />";
        }
    }
完成后台操作的辅助类：
public class WorkItem
{
    public WorkItem()
    {        
    }

    public WorkItem(int itemID, int priority, string title, string description)
    {
        _ItemID         = itemID;
        _Priority       = priority;
        _Title          = title;
        _Description    = description;
    }

    private int _ItemID;
    public int ItemID
    {
        get { return _ItemID;  }
        set { _ItemID = value;  }
    }

    private int _Priority;
    public int Priority
    {
        get { return _Priority; }
        set { _Priority = value; }
    }

    private string _Title;
    public string Title
    {
        get { return _Title; }
        set { _Title = value; }
    }

    private string _Description;
    public string Description
    {
        get { return _Description; }
        set { _Description = value; }
    }

    public override string ToString()
    {
        return string.Format("Item: ID:{0}\tPriority:{1}\tTitle{2}\tDecription{3}", _ItemID, _Priority, _Title, _Description);
    }

}

public class WorkItemsHelper
{
    public WorkItemsHelper()
    {
        
    }

    //Loads the Work items to the Application Scope
    public static void LoadWorkItems()
    {        
        HttpContext.Current.Session["WorkItems"] =  WorkItemsHelper.GetWorkItems();
    }
    //Returns the WorkItems - either from database or from application scope (if its there!)
    public static List<WorkItem> GetWorkItems()
    {
        if (HttpContext.Current.Session["WorkItems"] == null)
        {

            DataTable table = new WorkItemsTableAdapter().GetWorkItems();
            List<WorkItem> workItems = new List<WorkItem>();
            foreach (DataRow row in table.Rows)
            {
                workItems.Add(new WorkItem(int.Parse(row["ItemID"].ToString()),
                                           int.Parse(row["Priority"].ToString()),
                                           row["Title"].ToString(),
                                           row["Description"].ToString()));
            }
            return workItems;
        }
        return (List<WorkItem>)HttpContext.Current.Session["WorkItems"];
    }
    //Save the workItems to the ApplicationScope
    public static void SaveWorkItems(List<WorkItem> workItems)
    {
        HttpContext.Current.Session["WorkItems"] = workItems;
    }
}

运行结果：
        
posted on 2007-11-08 13:56  王晓成  阅读(1497)  评论(1)    收藏  举报