Web開發框架之分頁控件

一直以來，我的博客幾乎一直在介紹Winform相關的技術，其中包括Winform的分頁控件，其實Web方面的開發一直也在從事，只是較少寫這方面的內容而已，經過多年的積累及提煉，也逐漸形成了我自己特色的一套Web開發框架。最近對Web分頁控件進行了優化提煉，本文就從Web分頁控件進行介紹，讓大家了解這個體系中的一部分，也希望提出寶貴的意見，共同探討。

分頁控件的主要特點有：

1）內置支持Oracle、SqlServer、SQlite、MySql、Access數據庫，只需要指定數據庫類型即可自動調整。

2）與列表控件（DataGrid）分開，支持更多的界面特性。使得DataGrid控件展現更加豐富。

3）列表支持字段排序（升序、降序），支持樣式變化等。

4）分頁界面可以設置頁面數量為10、20、50、全部等數量級，更加方便數據顯示控制。

5）分頁控件分頁按鈕可以設定圖片。

6）可以結合我的查詢控件，快速實現數據查詢分頁顯示。

7）分頁控件支持參數化ＳＱＬ語句。

下載地址為：http://www.patientmis.com/Download/Web分頁控件例子Demo.rar

1、Web分頁界面效果

無圖無真相，首先我們來了解下分頁控件的相關顯示界面效果。

帶有查詢條件的效果如下所示，查詢模塊為了方便和分頁控件結合，也是一個控件來的，構造起來很方便，后面再詳細介紹。

當然，分頁控件很多屬性可以設置的，包括分頁的按鈕圖片，由於列表的DataGrid是外部的控件，因此樣式更可以自定義，只需要告訴分頁控件，列表的控件ID即可，因此你可以根據項目需要，構造自己列表展示效果。下面列出我項目中常用到的兩種皮膚界面。

1）淺藍色冷色調分頁效果

2）淺黃色暖色調分頁效果

當然，用戶可以根據需要，自己使用相應的界面效果樣式。

2）分頁控件具體使用代碼

1）首先在頁面上注冊控件，如下代碼所示

<%@ Register TagPrefix="cc1" Namespace="WHC.WebPager" Assembly="WebPager" %>

2）然后在頁面主體內容中添加分頁控件即可。其中dg為具體的DataGrid控件，使用的時候和分頁控件聯合使用。

 <cc1:Pager ID="Pager1" runat="server" Height="30" BindControlID="dg" ImageBasePath="../Images"
                        FirstImagePath="btn_sy.gif" NextImagePath="btn_xyy.gif" PreviousImagePath="btn_syy.gif"
                        LastImagePath="btn_wy.gif" GoImagePath="btn_go.gif" ExportImagePath="btn_export.gif">
                    </cc1:Pager>

3）DataGrid控件的參考代碼。

                    <asp:DataGrid ID="dg" runat="server" Width="100%" CssClass="dg" AutoGenerateColumns="False" PageSize="20"
                        AllowSorting="True" DataKeyField="ID" Height="0px" CellPadding="4" ForeColor="#333333"
                        GridLines="None" OnItemCreated="dg_ItemCreated" OnSortCommand="dg_SortCommand"
                        OnItemDataBound="dg_ItemDataBound">
                        <EditItemStyle CssClass="EditItem"></EditItemStyle>
                        <AlternatingItemStyle CssClass="AlternatingItem"></AlternatingItemStyle>
                        <ItemStyle CssClass="Item"></ItemStyle>
                        <HeaderStyle CssClass="Header"></HeaderStyle>
                        <FooterStyle CssClass="Footer"></FooterStyle>
                        <Columns>
                            <asp:TemplateColumn HeaderImageUrl="Images/delete.GIF">
                                <HeaderStyle Wrap="False" Width="60px"></HeaderStyle>
                                <ItemTemplate>
                                    <asp:CheckBox runat="server" ID="cbxDelete"></asp:CheckBox>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:BoundColumn DataField="ID" HeaderText="ID" SortExpression="ID"></asp:BoundColumn>
                            <asp:BoundColumn DataField="Name" HeaderText="名稱" SortExpression="Name"></asp:BoundColumn>
                            <asp:BoundColumn DataField="City" HeaderText="城市" SortExpression="City"></asp:BoundColumn>
                            <asp:BoundColumn DataField="Age" HeaderText="年齡" SortExpression="Age"></asp:BoundColumn>
                            <asp:BoundColumn DataField="Birthday" HeaderText="出生日期" SortExpression="Birthday">
                            </asp:BoundColumn>
                            <asp:BoundColumn DataField="Man" HeaderText="男性"></asp:BoundColumn>
                            <asp:TemplateColumn HeaderImageUrl="Images/edititem.gif">
                                <HeaderStyle Wrap="False" Width="60px"></HeaderStyle>
                                <ItemTemplate>
                                    <asp:HyperLink ID="lnkView" runat="server" Text="查看" NavigateUrl='<%# "Modify.aspx?type=view&id=" + Eval("ID") %>'>查看</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderImageUrl="Images/edititem.gif">
                                <HeaderStyle Wrap="False" Width="60px"></HeaderStyle>
                                <ItemTemplate>
                                    <asp:HyperLink ID="lnkEdit" runat="server" Text="編輯" NavigateUrl='<%# "Modify.aspx?type=edit&id=" + Eval("ID") %>'>編輯</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                        </Columns>
                        <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <PagerStyle HorizontalAlign="Left" ForeColor="#003399" BackColor="#99CCCC" Mode="NumericPages">
                        </PagerStyle>
                    </asp:DataGrid>

頁面的后台代碼如下所示，主要就是設置分頁控件的查詢語句以及排序等屬性，如下所示。

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                BindData();
            }
        }

        private void BindData()
        {
            try
            {
                this.Pager1.SortFieldNames = this.SortFieldNames;
                this.Pager1.SortFieldAscend = this.SortFieldAscend;
                this.Pager1.SQL = "SELECT * FROM test Order By ID";
            }
            catch (Exception ex)
            {
                Response.Write(string.Format("<script>alert('{0}');</script>", ex.Message));
            }
        }

以上就是沒有帶查詢條件的分頁控件，當然我們可以自己添加一些條件控件來實現查詢過濾數據的功能。

3、查詢控件和分頁控件的結合

前面介紹過，為了快速方便實現列表的查詢分頁，結合分頁控件使用，還有一個叫做查詢控件的東西，這個效果就是前面介紹的那樣，只不過是制定數據庫字段信息就可以了，不用像傳統那樣，自己部署各種條件控件在界面上，效果其實一樣，如下所示。

 我們來看這個界面的實現代碼。首先在界面上放置兩個控件的聲明代碼。

<%@ Register TagPrefix="cc1" Namespace="WHC.SearchControl" Assembly="SearchControl" %>
<%@ Register TagPrefix="cc2" Namespace="WHC.WebPager" Assembly="WebPager" %>

然后看頁面的前台代碼如下所示。

    <form id="Form1" method="post" runat="server">
    <div style="border: 1px solid #A8CFEB; background-color: #F1F6FF">
        <cc1:SearchControl ID="SearchControl1" runat="server" Width="100%" InSQL="SELECT * FROM Test"
            SortFieldNames="ID" RowControls="3" SearchButtonImage="../Images/btn_search.gif"
            ResetButtonImage="../Images/btn_reset.gif" CssClass="content"></cc1:SearchControl>
    </div>
    <div>
        <br />
        <asp:DataGrid ID="dg" runat="server" Width="100%" CssClass="dg" AutoGenerateColumns="False"
            BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" BackColor="White"
            CellPadding="4" AllowSorting="True" OnItemCreated="dg_ItemCreated" OnSortCommand="dg_SortCommand"
            OnItemDataBound="dg_ItemDataBound">
            <EditItemStyle CssClass="EditItem"></EditItemStyle>
            <AlternatingItemStyle CssClass="AlternatingItem"></AlternatingItemStyle>
            <ItemStyle CssClass="Item"></ItemStyle>
            <HeaderStyle CssClass="Header"></HeaderStyle>
            <FooterStyle CssClass="Footer"></FooterStyle>
            <Columns>
                <asp:BoundColumn DataField="ID" HeaderText="ID" SortExpression="ID">
                    <HeaderStyle Width="60px" />
                </asp:BoundColumn>
                <asp:BoundColumn DataField="Name" HeaderText="名稱" SortExpression="Name"></asp:BoundColumn>
                <asp:BoundColumn DataField="City" HeaderText="城市" SortExpression="City"></asp:BoundColumn>
                <asp:BoundColumn DataField="Age" HeaderText="年齡" SortExpression="Age"></asp:BoundColumn>
                <asp:BoundColumn DataField="Birthday" HeaderText="出生日期" SortExpression="Birthday">
                </asp:BoundColumn>
                <asp:BoundColumn DataField="Man" HeaderText="男性"></asp:BoundColumn>
                <asp:TemplateColumn HeaderImageUrl="Images/edititem.gif">
                    <HeaderStyle Wrap="False" Width="60px"></HeaderStyle>
                    <ItemTemplate>
                        <asp:HyperLink ID="lnkView" runat="server" Text="查看" NavigateUrl='<%# "Modify.aspx?type=view&id=" + Eval("ID") %>'>查看</asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderImageUrl="Images/edititem.gif">
                    <HeaderStyle Wrap="False" Width="60px"></HeaderStyle>
                    <ItemTemplate>
                        <asp:HyperLink ID="lnkEdit" runat="server" Text="編輯" NavigateUrl='<%# "Modify.aspx?type=edit&id=" + Eval("ID") %>'>編輯</asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>
        </asp:DataGrid>
    </div>
    <br />
    <div>
        <cc2:Pager ID="Pager1" runat="server" Height="30" BindControlID="dg" ImageBasePath="../Images"
            FirstImagePath="btn_sy.gif" NextImagePath="btn_xyy.gif" PreviousImagePath="btn_syy.gif"
            LastImagePath="btn_wy.gif" GoImagePath="btn_go.gif" ExportImagePath="btn_export.gif">
        </cc2:Pager>
    </div>
    </form>

后台主要代碼如下所示。

        private void Page_Load(object sender, EventArgs e)
        {            
            this.SearchControl1.OutSQLValueChanged += new OutSQLChangedHandle(SearchControl1_OutSQLValueChanged);
            this.SearchControl1.OnAddNew += new AddNewHandler(SearchControl1_OnAddNew);
            this.SearchControl1.OnDelete += new DeleteHandler(SearchControl1_OnDelete);

            WebControl appendButton = CreateImageButton("btnAppended", "統計", "Images/btn_Statistics.gif");
            this.SearchControl1.AppendedButtons = new WebControl[] { appendButton };

            if (!Page.IsPostBack)
            {
                FieldInfo nameInfo = new FieldInfo("Name", "姓名", FieldType.String);

                FieldInfo cityInfo = new FieldInfo("City", "城市", FieldType.String);
                cityInfo.Width = 100;
                cityInfo.Items = new ListItem[] { new ListItem("北京市", "北京"), new ListItem("廣州"), new ListItem("成都") };
                cityInfo.TargetFieldName = "Area";
                cityInfo.UseInItems = false;//所有的時候，不限定內容，默認限定為列表內容
                cityInfo.OnFillItem += new AddItemHandler(this.OnFillItem);

                FieldInfo areaInfo = new FieldInfo("Area", "地區", FieldType.String);
                areaInfo.Items = new ListItem[0];

                FieldInfo manInfo = new FieldInfo("Man", "是否男性", FieldType.Boolean);
                manInfo.UseInItems = false;

                FieldInfo birthInfo = new FieldInfo("Birthday", "出生日期", FieldType.DateTime);
                FieldInfo ageInfo = new FieldInfo("Age", "年齡", FieldType.Numeric);

                this.SearchControl1.SearchFields = new FieldInfo[] { nameInfo, cityInfo, areaInfo, manInfo, birthInfo, ageInfo };
                
                BindData();
            }
        }
        
        private void BindData()
        {
            this.Pager1.SortFieldNames = this.SearchControl1.SortFieldNames;
            this.Pager1.SortFieldAscend = this.SearchControl1.SortFieldAscend;
            this.Pager1.PagerParameters = this.SearchControl1.PagerParameters;
            this.Pager1.SQL = this.SearchControl1.OutSQL;
        }

        private void SearchControl1_OutSQLValueChanged(object sender, OutSQLChangedEventArgs e)
        {
            //測試輸出
            this.Response.Write(SearchControl1.OutSQL);

            BindData();
            this.Pager1.CurrentPage = 1;
        }

當然實現列表的聯動還有一個OFillItem的函數，代碼如下所示。

        private void OnFillItem(DropDownList ddListControl, string selItemValue)
        {
            ddListControl.Items.Clear();

            if (selItemValue.Trim().Length > 0)
            {
                string sql = string.Format("select Area from CityArea where City ='{0}' ", selItemValue);
                Database database = DatabaseFactory.CreateDatabase();
                DbCommand command = database.GetSqlStringCommand(sql);
                using (IDataReader reader = database.ExecuteReader(command))
                {
                    while (reader.Read())
                    {
                        ddListControl.Items.Add(new ListItem(reader["Area"].ToString()));
                    }
                }
            }

            ddListControl.Items.Insert(0, new ListItem("--所有--", string.Empty));
        }