一直以来，我的博客几乎一直在介绍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));
}
主要研究技术：代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发