• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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程序设计有所帮助。

    您可能感兴趣的文章:
    • ASP.NET数据绑定GridView控件使用技巧
    • 浅析GridView中显示时间日期格式的问题
    • Gridview利用DataFormatString属性设置数据格式的方法
    • GridView中日期不显示时分秒的完美解决方法
    上一篇:ASP.NET数据绑定GridView控件使用技巧
    下一篇:Gridview利用DataFormatString属性设置数据格式的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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