当前位置:Gxlcms > asp.net > GridView自定义分页实例详解(附demo源码下载)

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

时间:2021-07-01 10:21:17 帮助过:19人阅读

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

CSS样式

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

  1. .gv
  2. {
  3. border: 1px solid #D7D7D7;
  4. font-size:12px;
  5. text-align:center;
  6. }
  7. .gvHeader
  8. {
  9. color: #3F6293;
  10. background-color: #F7F7F7;
  11. height: 24px;
  12. line-height: 24px;
  13. text-align: center;
  14. font-weight: normal;
  15. font-variant: normal;
  16. }
  17. .gvHeader th
  18. {
  19. font-weight: normal;
  20. font-variant: normal;
  21. }
  22. .gvRow, .gvAlternatingRow, .gvEditRow
  23. {
  24. line-height: 20px;
  25. text-align: center;
  26. padding: 2px;
  27. height: 20px;
  28. }
  29. .gvAlternatingRow
  30. {
  31. background-color: #F5FBFF;
  32. }
  33. .gvEditRow
  34. {
  35. background-color: #FAF9DD;
  36. }
  37. .gvEditRow input
  38. {
  39. background-color: #FFFFFF;
  40. width: 80px;
  41. }
  42. .gvEditRow .gvOrderId input, .gvEditRow .gvOrderId
  43. {
  44. width: 30px;
  45. }
  46. .gvEditRow .checkBox input, .gvEditRow .checkBox
  47. {
  48. width: auto;
  49. }
  50. .gvCommandField
  51. {
  52. text-align: center;
  53. width: 130px;
  54. }
  55. .gvLeftField
  56. {
  57. text-align: left;
  58. padding-left: 10px;
  59. }
  60. .gvBtAField
  61. {
  62. text-align: center;
  63. width: 130px;
  64. }
  65. .gvCommandField input
  66. {
  67. background-image: url(../Images/gvCommandFieldABg.jpg);
  68. background-repeat: no-repeat;
  69. line-height: 23px;
  70. border-top-style: none;
  71. border-right-style: none;
  72. border-bottom-style: none;
  73. border-left-style: none;
  74. width: 50px;
  75. height: 23px;
  76. margin-right: 3px;
  77. margin-left: 3px;
  78. text-indent: 10px;
  79. }
  80. .gvPage
  81. {
  82. padding-left: 15px;
  83. font-size: 18px;
  84. color: #333333;
  85. font-family: Arial, Helvetica, sans-serif;
  86. }
  87. .gvPage a
  88. {
  89. display: block;
  90. text-decoration: none;
  91. padding-top: 2px;
  92. padding-right: 5px;
  93. padding-bottom: 2px;
  94. padding-left: 5px;
  95. border: 1px solid #FFFFFF;
  96. float: left;
  97. font-size: 12px;
  98. font-weight: normal;
  99. }
  100. .gvPage a:hover
  101. {
  102. display: block;
  103. text-decoration: none;
  104. border: 1px solid #CCCCCC;
  105. }

GridView样式

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

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

Pager分页模板

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

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

触发事件

方法btnGo_Click的定义如下所示:

  1. protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
  2. {
  3. GridView1.PageIndex = e.NewPageIndex;
  4. BindData();
  5. }
  6. protected void btnGo_Click(object sender, EventArgs e)
  7. {
  8. if (((LinkButton)sender).CommandArgument.ToString().ToLower().Equals("go"))
  9. {
  10. GridViewRow gridViewRow = GridView1.BottomPagerRow;
  11. TextBox numBox = (TextBox)GridView1.BottomPagerRow.FindControl("txtNewPageIndex");
  12. int inputNum = Convert.ToInt32(numBox.Text);
  13. GridView1.PageIndex = inputNum - 1;
  14. BindData();
  15. }
  16. }

效果图展示及源码下载

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

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

人气教程排行