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:PagerID="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:DataGridID="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">
                        <EditItemStyleCssClass="EditItem"></EditItemStyle>
                        <AlternatingItemStyleCssClass="AlternatingItem"></AlternatingItemStyle>
                        <ItemStyleCssClass="Item"></ItemStyle>
                        <HeaderStyleCssClass="Header"></HeaderStyle>
                        <FooterStyleCssClass="Footer"></FooterStyle>
                        <Columns>
                            <asp:TemplateColumnHeaderImageUrl="Images/delete.GIF">
                                <HeaderStyleWrap="False"Width="60px"></HeaderStyle>
                                <ItemTemplate>
                                    <asp:CheckBoxrunat="server"ID="cbxDelete"></asp:CheckBox>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:BoundColumnDataField="ID"HeaderText="ID"SortExpression="ID"></asp:BoundColumn>
                            <asp:BoundColumnDataField="Name"HeaderText="名称"SortExpression="Name"></asp:BoundColumn>
                            <asp:BoundColumnDataField="City"HeaderText="城市"SortExpression="City"></asp:BoundColumn>
                            <asp:BoundColumnDataField="Age"HeaderText="年龄"SortExpression="Age"></asp:BoundColumn>
                            <asp:BoundColumnDataField="Birthday"HeaderText="出生日期"SortExpression="Birthday">
                            </asp:BoundColumn>
                            <asp:BoundColumnDataField="Man"HeaderText="男性"></asp:BoundColumn>
                            <asp:TemplateColumnHeaderImageUrl="Images/edititem.gif">
                                <HeaderStyleWrap="False"Width="60px"></HeaderStyle>
                                <ItemTemplate>
                                    <asp:HyperLinkID="lnkView"runat="server"Text="查看"NavigateUrl='<%#"Modify.aspx?type=view&id="+ Eval("ID") %>'>查看</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumnHeaderImageUrl="Images/edititem.gif">
                                <HeaderStyleWrap="False"Width="60px"></HeaderStyle>
                                <ItemTemplate>
                                    <asp:HyperLinkID="lnkEdit"runat="server"Text="编辑"NavigateUrl='<%#"Modify.aspx?type=edit&id="+ Eval("ID") %>'>编辑</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                        </Columns>
                        <SelectedItemStyleBackColor="#D1DDF1"Font-Bold="True"ForeColor="#333333" />
                        <PagerStyleHorizontalAlign="Left"ForeColor="#003399"BackColor="#99CCCC"Mode="NumericPages">
                        </PagerStyle>
                    </asp:DataGrid>

页面的后台代码如下所示，主要就是设置分页控件的查询语句以及排序等属性，如下所示。

        protected void Page_Load(objectsender, EventArgs e)

        {if (!this.IsPostBack)

            {

                BindData();

            }

        }private voidBindData()

        {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" %>

然后看页面的前台代码如下所示。

    <formid="Form1"method="post"runat="server">
    <divstyle="border: 1px solid #A8CFEB; background-color: #F1F6FF">
        <cc1:SearchControlID="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:DataGridID="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">
            <EditItemStyleCssClass="EditItem"></EditItemStyle>
            <AlternatingItemStyleCssClass="AlternatingItem"></AlternatingItemStyle>
            <ItemStyleCssClass="Item"></ItemStyle>
            <HeaderStyleCssClass="Header"></HeaderStyle>
            <FooterStyleCssClass="Footer"></FooterStyle>
            <Columns>
                <asp:BoundColumnDataField="ID"HeaderText="ID"SortExpression="ID">
                    <HeaderStyleWidth="60px" />
                </asp:BoundColumn>
                <asp:BoundColumnDataField="Name"HeaderText="名称"SortExpression="Name"></asp:BoundColumn>
                <asp:BoundColumnDataField="City"HeaderText="城市"SortExpression="City"></asp:BoundColumn>
                <asp:BoundColumnDataField="Age"HeaderText="年龄"SortExpression="Age"></asp:BoundColumn>
                <asp:BoundColumnDataField="Birthday"HeaderText="出生日期"SortExpression="Birthday">
                </asp:BoundColumn>
                <asp:BoundColumnDataField="Man"HeaderText="男性"></asp:BoundColumn>
                <asp:TemplateColumnHeaderImageUrl="Images/edititem.gif">
                    <HeaderStyleWrap="False"Width="60px"></HeaderStyle>
                    <ItemTemplate>
                        <asp:HyperLinkID="lnkView"runat="server"Text="查看"NavigateUrl='<%#"Modify.aspx?type=view&id="+ Eval("ID") %>'>查看</asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumnHeaderImageUrl="Images/edititem.gif">
                    <HeaderStyleWrap="False"Width="60px"></HeaderStyle>
                    <ItemTemplate>
                        <asp:HyperLinkID="lnkEdit"runat="server"Text="编辑"NavigateUrl='<%#"Modify.aspx?type=edit&id="+ Eval("ID") %>'>编辑</asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>
        </asp:DataGrid>
    </div>
    <br/>
    <div>
        <cc2:PagerID="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(objectsender, EventArgs e)

        {this.SearchControl1.OutSQLValueChanged += newOutSQLChangedHandle(SearchControl1_OutSQLValueChanged);this.SearchControl1.OnAddNew += newAddNewHandler(SearchControl1_OnAddNew);this.SearchControl1.OnDelete += newDeleteHandler(SearchControl1_OnDelete);



            WebControl appendButton= CreateImageButton("btnAppended", "统计", "Images/btn_Statistics.gif");this.SearchControl1.AppendedButtons = newWebControl[] { 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 = newFieldInfo[] { nameInfo, cityInfo, areaInfo, manInfo, birthInfo, ageInfo };

                

                BindData();

            }

        }private voidBindData()

        {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(objectsender, OutSQLChangedEventArgs e)

        {//测试输出
            this.Response.Write(SearchControl1.OutSQL);



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

        }

当然实现列表的联动还有一个OFillItem的函数，代码如下所示。

        private void OnFillItem(DropDownList ddListControl, stringselItemValue)

        {

            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));
        }

Web开发框架之分页控件

1、Web分页界面效果

2）分页控件具体使用代码

3、查询控件和分页控件的结合

添加新评论

最新文章

最近回复

分类

归档

其它