`
shirlly
  • 浏览: 1626193 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

GridView自定义分页

    博客分类:
  • .NET
阅读更多
在.NET平台下处理显示数据时,需要经常使用GridView控件进行分页,虽然它本身提供了分页机制,但总的说来其分页效果较为单调,大部分情况下无法满足客户的需求(也只能让开发人员YY一下而已)。与此同时,GridView提供了多种扩展机制,用户可以在此基础上自行扩展分页功能。现在就对其分页进行相应的扩展
首先,对GridView控件添加一个PagerTemplate,其HTML代码如下所示。
<asp:GridView ID="GridView1" runat="server" 
                  AllowPaging="True" PageSize="5" 
                  OnDataBound = "GridView_DataBind" CellPadding=2 CellSpacing=0>
              <PagerTemplate>
               <div id="main">
                  <div id="info">&nbsp;&nbsp;页次:<asp:Label ID="lblPageCurrent" runat="server" Text="1" CssClass="txtInfo"></asp:Label>
                  /<asp:Label ID="lblPageCount" runat="server" Text="1"></asp:Label>&nbsp;&nbsp;
                  共&nbsp;<asp:Label ID="lblPageRow" runat="server" Text="1" CssClass="txtInfo"></asp:Label>&nbsp;条记录
                  </div>
                  <div id="page">
                      <asp:LinkButton ID="btnFirst" runat="server" CssClass="link" CommandName="Pager" CommandArgument="First" OnCommand="NavigateToPage">[首页]</asp:LinkButton>&nbsp;
                      <asp:LinkButton ID="btnPrev" runat="server" CssClass="link" CommandName="Pager" CommandArgument="Prev" OnCommand ="NavigateToPage">[前一页]</asp:LinkButton>&nbsp;
                      <asp:LinkButton ID="btnNext" runat="server" CssClass="link" CommandName="Pager" CommandArgument="Next" OnCommand="NavigateToPage">[下一页]</asp:LinkButton>&nbsp;
                      <asp:LinkButton ID="btnLast" runat="server" CssClass="link" CommandName="Pager" CommandArgument="Last" OnCommand="NavigateToPage">[尾页]</asp:LinkButton>&nbsp;&nbsp;
                  </div>
               </div>
              </PagerTemplate>
              <RowStyle BackColor="#F9F9F9" />
              <HeaderStyle BackColor="#EDF7E7" Font-Bold="true" />
              <AlternatingRowStyle BackColor="White" />
          </asp:GridView>



添加的三个Label(lblPageCurrent,lblPageCount,lblPageRow)控件分别用来显示当前页、总页数及总记录数。添加的四个LinkButton控件用来导航。控件准备好之后,就开始写代码,首先需要完成GridView控件的OnDataBound事件(GridView_DataBind),再次需要完成LinkButton的Command事件(NavigateToPage)这一步主要用来导航。其具体代码如下所示。
public partial class Default : System.Web.UI.Page
{
      int rowCount = 0;//用来记录总记录数
      protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
              GridViewFill();
      }
      private void GridViewFill()
      {
          string strConn = "server=localhost\\sqlexpress;database=MyComics;Integrated Security=True";
          SqlConnection conn = new SqlConnection(strConn);
          DataSet ds = new DataSet();
          string strSql = "SELECT * FROM Books";
          SqlDataAdapter DA = new SqlDataAdapter(strSql, conn);
          DA.Fill(ds, "Books");
          rowCount = ds.Tables["Books"].Rows.Count;         //取得总记录数目
          this.GridView1.DataSource = ds.Tables["Books"];
          this.GridView1.DataBind();
      }
      protected void NavigateToPage(object sender, CommandEventArgs e)
      {
          //控制转页
          switch (e.CommandArgument.ToString())
          {
              case "First":
                  this.GridView1.PageIndex = 0;
                  break;
              case "Prev":
                  if (this.GridView1.PageIndex > 0)
                      this.GridView1.PageIndex -= 1;
                  break;
              case "Next":
                  if (this.GridView1.PageIndex < (this.GridView1.PageCount - 1))
                      this.GridView1.PageIndex += 1;
                  break;
              case "Last":
                  this.GridView1.PageIndex = this.GridView1.PageCount - 1;
                  break;
          }
          GridViewFill();
      }
      protected void GridView_DataBind(object sender, EventArgs e)
      {
          GridViewRow pagerRow = GridView1.BottomPagerRow;
          //获取Label实例,显示页次信息
          Label lblCurrent = (Label)pagerRow.Cells[0].FindControl("lblPageCurrent");
          Label lblCount = (Label)pagerRow.Cells[0].FindControl("lblPageCount");
          Label lblRow = (Label)pagerRow.Cells[0].FindControl("lblPageRow");
          //获取按钮实例,为了控制其是否可用
          LinkButton btnFirstTem = (LinkButton)pagerRow.Cells[0].FindControl("btnFirst");
          LinkButton btnPrevTem = (LinkButton)pagerRow.Cells[0].FindControl("btnPrev");
          LinkButton btnNextTem = (LinkButton)pagerRow.Cells[0].FindControl("btnNext");
          LinkButton btnLastTem = (LinkButton)pagerRow.Cells[0].FindControl("btnLast");

          if (lblCurrent != null)
              lblCurrent.Text = (this.GridView1.PageIndex + 1).ToString();
          if (lblCount != null)
              lblCount.Text = this.GridView1.PageCount.ToString();
          if (lblRow != null)
              lblRow.Text = rowCount.ToString();

          if (this.GridView1.PageIndex == 0)
          {
              btnFirstTem.Enabled = false;
              btnPrevTem.Enabled = false;
              //只有一页,所有分页按钮不可用
              if (this.GridView1.PageCount == 1)
              {
                  btnNextTem.Enabled = false;
                  btnLastTem.Enabled = false;
              }
          }
          else if (this.GridView1.PageIndex == (this.GridView1.PageCount - 1))
          {
              btnNextTem.Enabled = false;
              btnLastTem.Enabled = false;
          }
      }
}



OK,现在就可以使用我们自定义的分页了,目前网络上使用的分页大部分都是这种样子,因此在进行样式设计时,就直接按照这种模式设计了。其中在控制外观时,使用了一个样式表,其具体代码如下所示。
body 
{
font-size:9pt;
}
#main
{
background-color:#EDF7E7;
line-height:30px;
width:100%;
text-align:left;
}
#info
{
width: 40%;
font-family: Verdana;
float:left;
text-align:left;
}
#page
{
width:60%;
float:left;
overflow:auto;
text-align:right;
}
.txtInfo
{
color:#e78a29;
}
.link
{
    text-decoration:none;
    color:#474747;
}



导航按钮我使用了LinkButton控件,也可以使用ImageButton控件,这样就可以使用自己绘制的图片作为当航提示,从而避免只有文字的光秃效果。

        另外,我在计算记录的总数目时,使用的是rowCount = ds.Tables["Books"].Rows.Count这种方法,我一直在想GridView控件应该也能够提供一种获取总记录的方法,只可惜在我写这篇文章时,一直没有发现。那位高手懂得,还望赐教~~~~~~~~~~~~~~~~。Rayshow在此谢过...
转自:http://hi.baidu.com/rayshow/blog/item/aa10248ba5ef8b10c9fc7a67.html
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics