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>页  
     <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程序设计有所帮助。