GridView自定义分页实例详解(附demo源码下载)

更新时间：2016年03月07日 09:33:39 作者：程序诗人

这篇文章主要介绍了GridView自定义分页的方法,结合实例形式较为详细的分析了GridView自定义分页所涉及的样式布局及功能实现相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了GridView自定义分页实现方法。分享给大家供大家参考，具体如下：

CSS样式

首先把CSS样式代码粘贴过来：

.gv
{
  border: 1px solid #D7D7D7;
  font-size:12px;
  text-align:center;
}
.gvHeader
{
  color: #3F6293;
  background-color: #F7F7F7;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-weight: normal;
  font-variant: normal;
}
.gvHeader th
{
  font-weight: normal;
  font-variant: normal;
}
.gvRow, .gvAlternatingRow, .gvEditRow
{
  line-height: 20px;
  text-align: center;
  padding: 2px;
  height: 20px;
}
.gvAlternatingRow
{
  background-color: #F5FBFF;
}
.gvEditRow
{
  background-color: #FAF9DD;
}
.gvEditRow input
{
  background-color: #FFFFFF;
  width: 80px;
}
.gvEditRow .gvOrderId input, .gvEditRow .gvOrderId
{
  width: 30px;
}
.gvEditRow .checkBox input, .gvEditRow .checkBox
{
  width: auto;
}
.gvCommandField
{
  text-align: center;
  width: 130px;
}
.gvLeftField
{
  text-align: left;
  padding-left: 10px;
}
.gvBtAField
{
  text-align: center;
  width: 130px;
}
.gvCommandField input
{
  background-image: url(../Images/gvCommandFieldABg.jpg);
  background-repeat: no-repeat;
  line-height: 23px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  width: 50px;
  height: 23px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: 10px;
}
.gvPage
{
  padding-left: 15px;
  font-size: 18px;
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
}
.gvPage a
{
  display: block;
  text-decoration: none;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
  float: left;
  font-size: 12px;
  font-weight: normal;
}
.gvPage a:hover
{
  display: block;
  text-decoration: none;
  border: 1px solid #CCCCCC;
}

GridView样式

根据上面列出的CSS样式样式名称，将他们分别加入网页GridView的不同标记中，举例如下：

<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" CssClass="gvRow" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" CssClass="gvHeader" />
<AlternatingRowStyle BackColor="#F7F7F7" CssClass="gvAlternatingRow" />

Pager分页模板

其中gridview下方的换页代码为：

<PagerTemplate>
  <table width="100%" style="font-size:12px;">
    <tr>
    <td style="text-align: right">
      第<asp:Label ID="lblPageIndex" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageIndex + 1 %>'></asp:Label>页
      /共<asp:Label ID="lblPageCount" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageCount %>'></asp:Label>页&nbsp;&nbsp;
     <asp:LinkButton ID="LinkButtonFirstPage" runat="server" CommandArgument="First" CommandName="Page" Visible="<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>">首页</asp:LinkButton>
     <asp:LinkButton ID="LinkButtonPreviousPage" runat="server" CommandArgument="Prev" CommandName="Page" Visible="<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>">上一页</asp:LinkButton>
     <asp:LinkButton ID="LinkButtonNextPage" runat="server" CommandArgument="Next" CommandName="Page" Visible="<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>">下一页</asp:LinkButton>
     <asp:LinkButton ID="LinkButtonLastPage" runat="server" CommandArgument="Last" CommandName="Page" Visible="<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>">尾页</asp:LinkButton>
     <asp:TextBox ID="txtNewPageIndex" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageIndex + 1 %>' Width="20px" AutoPostBack="true" ></asp:TextBox>
     <asp:LinkButton ID="btnGo" runat="server" CommandArgument="GO" CommandName="Page" Text="GO" OnClick="btnGo_Click"></asp:LinkButton>
    </td>
    </tr>
  </table>
</PagerTemplate>

触发事件

方法btnGo_Click的定义如下所示：

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
  GridView1.PageIndex = e.NewPageIndex;
  BindData();
}
protected void btnGo_Click(object sender, EventArgs e)
{
  if (((LinkButton)sender).CommandArgument.ToString().ToLower().Equals("go"))
  {
    GridViewRow gridViewRow = GridView1.BottomPagerRow;
    TextBox numBox = (TextBox)GridView1.BottomPagerRow.FindControl("txtNewPageIndex");
    int inputNum = Convert.ToInt32(numBox.Text);
    GridView1.PageIndex = inputNum - 1;
    BindData();
  }
}

效果图展示及源码下载

完整实例代码点击此处本站下载。

希望本文所述对大家asp.net程序设计有所帮助。

您可能感兴趣的文章:

在.NET中取得代码行数的方法
这篇文章主要介绍了在.NET中如何取得代码行数,需要的朋友可以参考下
2014-06-06
ASP.NET(C#) Web Api通过文件流下载文件的实例
这篇文章主要介绍了ASP.NET(C#) Web Api通过文件流下载文件的方法,提供源码下载,需要的朋友可以参考下。
2016-06-06
CorFlags.exe检查.NET程序平台目标(Platform Target)的工具
.NET Framework SDK中的一个工具程序: CorFlags.exe。CorFlags.exe不但可查询.NET组件的平台目标设定，甚至能直接修改设定，省去重新编译的工夫。
2013-02-02
ASP.NET Core缓存静态资源示例详解
我们在优化Web服务的时候，对于静态的资源文件，通常都是通过客户端缓存、服务器缓存、CDN缓存，这三种方式来缓解客户端对于Web服务器的连接请求压力的。下面这篇文章主要给大家介绍了关于ASP.NET Core缓存静态资源的相关资料，需要的朋友可以参考下。
2018-02-02
.NET Framework 的项目如何使用 FTP 下载文件
本文专门针对面向 .NET Framework 的项目, 对于面向 .NET 6 及更高版本的项目,不再支持 FTP,此示例演示如何从 FTP 服务器下载文件,感兴趣的朋友跟随小编一起看看吧
2024-01-01
Web Services使用多态的方法
Web Services可以支持多态，不过仅仅限制在可以直接引用Web Services的时候，本文也只是起到抛砖引玉的效果，
2015-10-10
Unicode中文转码函数代码
最近在研究QQ空间里个个游戏的工具，需要把腾讯编码过的用户名解码，照实费了点劲。
2011-01-01
五步掌握OOM框架AutoMapper基本使用
本文主要介绍了OOM框架AutoMapper的相关知识，本篇的五个实例可以帮你解决常见的基本问题。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
其实这个已经是个比较常见的功能了，网上也有很多人做过这个了，但是很多都是仅仅做了一些基本的网页上自动完成功能，没有与具体的数据库进行联动，我今天所介绍这个自动完成的就是我修改的jQuery.AutoComplete+数据库的一个解决方案。
2010-05-05
.NET截取指定长度汉字超出部分以"..."代替实例分享
.NET截取指定长度汉字超出部分以"..."代替实例分享，需要的朋友可以参考一下
2013-06-06

GridView自定义分页实例详解(附demo源码下载)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具