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

所属分类: 网络编程 / ASP.NET 阅读数: 1129
收藏 0 赞 0 分享

本文实例讲述了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程序设计有所帮助。

更多精彩内容其他人还在看

运行page页面时的事件执行顺序及页面的回发与否深度了解

page页面时的事件执行顺序的了解对于一些.net开发者起到者尤关重要的作用;页面的回发与否会涉及到某些事件执行与不执行,在本文中会详细介绍,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Web.config(应用程序的配置信息)总结

Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中,接下来详细介绍一下配置情况,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

C#时间格式化(Datetime)用法详解

C#时间格式化Datetime.ToString参数format格式详细用法,本文将进行介绍,感兴趣的朋友可以了解下啊
收藏 0 赞 0 分享

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样有演示动画,感兴趣的朋
收藏 0 赞 0 分享

Asp.net 图片文件防盗链(尊重劳动成果)及BeginRequest事件学习

关于图片盗链这个问题,毕竟是自己的劳动成功,很多人不希望别人就那么轻易地偷走了;反盗链的程序其实很简单,熟悉ASP.NET 应用程序生命周期的话很容易就可以写一个,运用HttpModule在BeginRequest事件中拦截请求就ok了
收藏 0 赞 0 分享

asp.net Grid 导出Excel实现程序代码

看了FineUI中的将Grid导出为Excel的实现方法,实际上是可以非常简单。看来很难的问题,变换一种思路就可以非常简单
收藏 0 赞 0 分享

使用C#处理WebBrowser控件在不同域名中的跨域问题

我们在做web测试时,经常会使用WebBrowser来进行一些自动化的任务而有些网页上面会用IFrame去嵌套别的页面,这些页面可能不是在相同域名下的,这时就会出现跨域问题,无法直接在WebBrowser中获取到IFrame中的元素,接下来介绍如何解决此问题,需要了解的朋友可以参
收藏 0 赞 0 分享

.NET 下运用策略模式(组合行为和实体的一种模式)

我简单的理解策略模式就是把行为(方法)单独的抽象出来,并采用组合(Has-a)的方式,来组合行为和实体的一种模式比如,.NET中对数组排序的Sort的方法就是一个策略模式的实现模板
收藏 0 赞 0 分享

使用Entity Framework(4.3.1版本)遇到的问题整理

在这里记录一下之前使用Entity Framework(4.3.1版本)遇到的问题:更新没有设置主键的表、更改Code-First的默认连接、检测字符串截断错误,需要的朋友可以参考下
收藏 0 赞 0 分享

Asp.net利用JQuery AJAX实现无刷新评论思路与代码

Asp.net利用JQuery AJAX实现无刷新评论,此功能是每一个从事asp.net开发者的朋友都希望实现的,本文利用闲暇时间整理了一些,有需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多