Web开发框架之分页控件

最新推荐文章于 2024-08-15 16:16:07 发布
最新推荐文章于 2024-08-15 16:16:07 发布
阅读量1k 收藏 1
点赞数
分类专栏： 分页 C# web
C# 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
分页
5 篇文章 0 订阅
订阅专栏
web
2 篇文章 0 订阅
订阅专栏
 

一直以来，我的博客几乎一直在介绍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二次开发、送水管理软件等共享软件开发
专注于Winform开发框架、WCF开发框架的研究及应用。
  转载请注明出处：
撰写人：伍华聪  http://www.iqidi.com 
jueng
关注
专栏目录
非常好用的分页控件
08-11
很好用的分页控件,适用与web前端和后台还有winform。
web分页控件（代码）超级简单的
09-10
没事做做为以后做准备。只有分页一个功能。不推荐大家下载，如果你没有键盘的话，可以用鼠标搞定。哈哈
WPF自定义分页控件
最新发布
qq_43014802的博客
08-15 837
使用wpf用户控件实现一个分页控件
Web用户控件开发--分页控件
weixin_34311757的博客
07-27 103
分页是Web应用程序中最常用到的功能之一，在ASP.NET中，虽然自带了一些可以分页的数据控件，但其分页功能并不尽如人意。本文对于这些数据控件的假分页暂且不表，如有不明白的同学请百Google度之。 本文中实现的分页控件是在手动分页基础上做的改善，将分页实现的逻辑部分和数据控件的绑定尽可能分开，以克服手工编写分页代码任务繁琐、代码重用率低等问题。 本文依旧是一粒粟子。 一、分页控件素颜 ...
分页控件
huifeidexin_1的专栏
05-03 841
分页控件是一种用来取代导航栏的可见指示器，方便手势直接翻页，最典型的应用便是iPhone的主屏幕，当图标过多会自动增加页面，在屏幕底部你会看到原点，用来只是当前页面，并且会随着翻页自动更新。 一、创建 [java] view plaincopyprint? UIPageControl* myPageControl = [[UIPageCon
asp.net web页面自定义分页控件使用详解
10-20
***是一个用于构建动态网页和Web应用程序的开放源代码Web框架。随着互联网应用的日益复杂和用户需求的不断提升，分页功能成为许多Web应用中必不可少的功能之一，尤其是对于数据量较大的情况。在***中，可以使用内置...
gwt之分页控件
05-27
在这个“gwt之分页控件”的主题中，我们将深入探讨GWT中如何实现高效且用户友好的分页功能。 首先，我们需要理解GWT的基本工作原理。GWT将Java代码编译成JavaScript，使得开发者可以在浏览器环境中运行Java应用，而...
ASP.NET 控件开发系列之图片切换web控件
10-29
ASP.NET控件开发是构建动态Web应用程序的关键技术之一，它允许开发者自定义用户界面元素，以满足特定项目需求。在本案例中，我们探讨的是一个ASP.NET中的图片切换Web控件，这是一种常见的交互式功能，通常用于展示...
Web分页控件例子Demo
08-30
在Web开发中，分页控件是一个至关重要的组件，它帮助用户在大量数据中进行有效导航，提升用户体验。"Web分页控件例子Demo"是一个示例项目，旨在展示如何在网页应用中实现高效且用户友好的分页功能。下面我们将深入...
C#分页控件 轻松实现分页操作
09-26
在.NET框架中，C#是一种常用的编程语言，用于开发各种应用程序，包括Web、Windows桌面以及移动应用等。在处理大量数据时，为了提高用户体验和性能，分页功能是必不可少的。C#分页控件正是为此目的而设计的，它可以...
一个WEB的分页控件
03-18
一个WEB的分页控件 一个WEB的分页控件
C# web分页控件
03-28
C# web分页控件，asp.net用到的控件，只需实现委托方法。
bPage分页插件
11-18
bootstrap风格的分页插件，美观大方，功能强大，亲测好用！
带有分页技术的web案例
03-17
压缩包里是一个web工程，jar包和数据库都有，安装数据库，eclipse导入后直接在tomcat中运行即可。里面有分页技术，分页的简单原理说明http://blog.csdn.net/csdnliuxin123524/article/details/79590106这里有说明
分页插件-网页效果
01-09
分页插件-网页效果
简单的web分页控件
标点丶
06-15 2828
一个简单的web分页控件
Asp.Net Web控件 （六）（分页控件）
akm84116的博客
10-05 272
这个控件是在可分页的Repeater中分离出来的，所以具体的使用是一样的。 下面看具体的例子： HTML如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值