【转】.net做自定义pagerstyle

最新推荐文章于 2023-02-15 09:18:16 发布
最新推荐文章于 2023-02-15 09:18:16 发布
阅读量1k 收藏 1
点赞数
分类专栏： C# 前端 文章标签： asp.net c# .net gridview
C# 同时被 2 个专栏收录
37 篇文章 0 订阅
订阅专栏
前端
10 篇文章 0 订阅
订阅专栏

做网页时，经常地我们要做自己的分页控件底部页码部分的样式，但是.net自己的样式太过于单调，也不容易扩展，因些，我们经常要重写pagerstyle，这样也会很麻烦的，但是，我们如果利用.NET分页功能所产生的JS脚本代码，则可以很容易地实现我们想要的效果。下面，我们将利用.net的GRIDVIEW实现一个分页显示效果：


                                                      最终效果图

实现步骤：

1.页面添加一个GRIDVIEW控件，开启分页的功能。

2.可以看到下面有生成的页码效果。


3.下一步，将页码部分隐藏。

在页面加入代码：

<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Center" CssClass="hideMe" />

样式hideMe代码为：

.hideMe {display:none;}

4.添加自己要定义的底部页码样式，注意要在<asp:GridView 控件代码的外部添加，不要在pagerstyle里面添加，否则，原来自代的分页页码就会丢掉。

<span class="fy_text" style="width:60;">
            <asp:DropDownList ID="selCount" runat="server" OnSelectedIndexChanged="selCountIndexChange" AutoPostBack="True">
              <asp:ListItem Value="5" Text="5条/页"></asp:ListItem>
              <asp:ListItem Value="10" Text="10条/页"></asp:ListItem>
              <asp:ListItem Value="15" Text="15条/页" ></asp:ListItem>
              <asp:ListItem Value="20" Text="20条/页" Selected=True></asp:ListItem>
            </asp:DropDownList>
            </span>
           <span class="fy_text" style="width:60;">
            <select id="SelIndex" name="SelIndex" οnchange="__doPostBack('GridView1',document.form1.SelIndex.value)">
                <%
                    for (int i = 1; i <= GridView1.PageCount; i++)
                    {
                        Response.Write("<option value=\"Page$" + i.ToString() + "\" " + (GridView1.PageIndex+1 == i ? "selected" : "") + ">第 " + i.ToString() + " 页</option>");
                    }
                %>
            </select></span>
            <span class="fy_text" style=" width:96; border:solid 1px #CCCCCC;">共<%=GridView1.Rows.Count%>条 /分<%=GridView1.PageCount%>页</span>
            <%if (GridView1.PageIndex == 0)
              { %>
            <span class="fy_text" style="width:48;border:solid 1px #CCCCCC;"><a href="#" class="syy_on">上一页</a></span>
            <%}
              else
              {
              Response.Write("<span class='fy_text' style='width:48;border:solid 1px #CCCCCC;'><a href=\"javascript:__doPostBack('GridView1','Page$"+ GridView1.PageIndex.ToString()+"')\">上一页</a></span>");

                }
               %>
            <%
                for (int i = 1; i <= GridView1.PageCount; i++)
                {
                    
                    if (i != GridView1.PageIndex + 1)
                        Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial;'><a href=\"javascript:__doPostBack('GridView1','Page$" + i.ToString() + "')\"> " + i.ToString() + " </a></span>");
                    else
                        Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial; color:red;'>" + i.ToString() + "</span>");
                } 
            %>
            <%if (GridView1.PageIndex + 1 < GridView1.PageCount)
              { %>
            <span class="fy_text" style="width:48; border:solid 1px #CCCCCC;"><a href="javascript:__doPostBack('GridView1','Page$<% =GridView1.PageCount-1>GridView1.PageIndex?(GridView1.PageIndex+2).ToString():(GridView1.PageIndex+1).ToString() %>')" >下一页</a></span>
            <%}
              else { Response.Write("<span class='fy_text' style='width:48; border:solid 1px #CCCCCC; color:#cccccc'>下一页</span>"); }%>

这样，我们底部页码部分效果就做好了，利用控件分页自动生成的__doPostBack()函数实现页面跳转，十分方便，我们所做的无非就是做一些页码呈现的控制和实现各个控件间的协作功能。十分简单。

关键点：不要改变自带的pagerstyle，将其隐藏，这样就可以利用.net自动生成的doPostBack函数。

附上我的页面代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManagerNews.aspx.cs" Inherits="Manager_ManagerNews" EnableEventValidation="true"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <title>新闻列表</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
    <script>
        function checkAll(obj)
        {
              var input=document.getElementsByTagName("input");
            for(var i=0;i<input.length;i++)
            {
            if(input[i].type=="checkbox"&&input[i]!=obj)
            {    
                if(input[i].checked==true)
                {
                   input[i].checked=false;
                }
                else if(input[i].checked==false)
                {
                 input[i].checked=true;
                 }
             }
            }
        }
    </script>
    
    <style type="text/css">
       .tr { line-height:21px; height:21px;}
       .hideMe {display:none;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="news_list">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:15px;">
        <tr>
          <td class="zwln_title" width="110"><a href="NewsAdd.aspx" target="right">== 新增新闻 ==</a> </td>
          <td width="520" class="zwln_title">&nbsp;</td>
          <td width="50" class="zwln_title"><a href="javascript:checkAll(this);">[全选]</a></td>
          <td width="50" class="zwln_title">
              <asp:LinkButton ID="lbtnDelete" runat="server" OnClick="lbtnDelete_Click">[删除]</asp:LinkButton>
             </td>
          <td width="80" class="zwln_title">新闻分类:</td>
          <td width="90" class="zwln_title">
          <asp:DropDownList ID="dropNewsType" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropNewsType_SelectedIndexChanged">
                                </asp:DropDownList>
          </td>
      </tr>
</table>
    <asp:GridView ID="GridView1" runat="server"
                           CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%"
                            AutoGenerateColumns="False" EmptyDataText="暂时没有新闻" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
                    
                   
                    <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Center" CssClass="hideMe" />
                    <HeaderStyle CssClass="bt_title"/>
                     <RowStyle BackColor="#EFF3FB" CssClass="bt_title2"/>
                    <AlternatingRowStyle BackColor="White" />
                    <EmptyDataRowStyle HorizontalAlign="Center" ForeColor="#827339" />
                              <Columns>
                                   <asp:TemplateField >
                                  <ItemTemplate>
                                       
                                <input id="chSelect" type="checkbox" runat="server"/>
                                  </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
                                  </asp:TemplateField>
                                
                                  <asp:TemplateField HeaderText="新闻标题">
                                  <ItemTemplate>
                                   <%#ComDll.GetSubBString(Eval("EditTitle").ToString(), 48)%>
                                  </ItemTemplate>
                                      <ItemStyle HorizontalAlign="Center" CssClass='bt_title3'/>
                                  </asp:TemplateField>
                                  
                                  
                                  <asp:TemplateField HeaderText="权限">
                                  <ItemTemplate>
                                   <%#Eval("ImportSign").ToString()=="0"?"一般":"加密"%>
                                  </ItemTemplate>
                                      <ItemStyle HorizontalAlign="Center" CssClass='bt_title2'/>
                                  </asp:TemplateField>
                                  
                                    <asp:BoundField DataField="classname" HeaderText="分类" >
                                      <ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
                                  </asp:BoundField>
                                  <asp:BoundField DataField="SourceName" HeaderText="来源" >
                                      <ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
                                  </asp:BoundField>
                                 
                                       <asp:TemplateField HeaderText="信息日期">
                                  <ItemTemplate>
                                     <%#string.IsNullOrEmpty(Eval("DeclareDate").ToString())?"":
                                         Convert.ToDateTime(Eval("DeclareDate")).ToString("yyyy-MM-dd") %>
                                  </ItemTemplate>
                                      <ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
                                  </asp:TemplateField>
                                  
                                  <asp:TemplateField HeaderText="操作">
                                  <ItemTemplate>
                                      <a href="Modify.aspx?ID=<%#Eval("ID") %>">修改</a>
                                  </ItemTemplate>
                                      <ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
                                  </asp:TemplateField>
                              </Columns>
        <PagerSettings PageButtonCount="1000" />
                </asp:GridView>
            <br />
            <span class="fy_text" style="width:60;">
            <asp:DropDownList ID="selCount" runat="server" OnSelectedIndexChanged="selCountIndexChange" AutoPostBack="True">
              <asp:ListItem Value="5" Text="5条/页"></asp:ListItem>
              <asp:ListItem Value="10" Text="10条/页"></asp:ListItem>
              <asp:ListItem Value="15" Text="15条/页" ></asp:ListItem>
              <asp:ListItem Value="20" Text="20条/页" Selected=True></asp:ListItem>
            </asp:DropDownList>
            </span>
           <span class="fy_text" style="width:60;">
            <select id="SelIndex" name="SelIndex" οnchange="__doPostBack('GridView1',document.form1.SelIndex.value)">
                <%
                    for (int i = 1; i <= GridView1.PageCount; i++)
                    {
                        Response.Write("<option value=\"Page$" + i.ToString() + "\" " + (GridView1.PageIndex+1 == i ? "selected" : "") + ">第 " + i.ToString() + " 页</option>");
                    }
                %>
            </select></span>
            <span class="fy_text" style=" width:96; border:solid 1px #CCCCCC;">共<%=GridView1.Rows.Count%>条 /分<%=GridView1.PageCount%>页</span>
            <%if (GridView1.PageIndex == 0)
              { %>
            <span class="fy_text" style="width:48;border:solid 1px #CCCCCC;"><a href="#" class="syy_on">上一页</a></span>
            <%}
              else
              {
              Response.Write("<span class='fy_text' style='width:48;border:solid 1px #CCCCCC;'><a href=\"javascript:__doPostBack('GridView1','Page$"+ GridView1.PageIndex.ToString()+"')\">上一页</a></span>");

                }
               %>
            <%
                for (int i = 1; i <= GridView1.PageCount; i++)
                {
                    
                    if (i != GridView1.PageIndex + 1)
                        Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial;'><a href=\"javascript:__doPostBack('GridView1','Page$" + i.ToString() + "')\"> " + i.ToString() + " </a></span>");
                    else
                        Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial; color:red;'>" + i.ToString() + "</span>");
                } 
            %>
            <%if (GridView1.PageIndex + 1 < GridView1.PageCount)
              { %>
            <span class="fy_text" style="width:48; border:solid 1px #CCCCCC;"><a href="javascript:__doPostBack('GridView1','Page$<% =GridView1.PageCount-1>GridView1.PageIndex?(GridView1.PageIndex+2).ToString():(GridView1.PageIndex+1).ToString() %>')" >下一页</a></span>
            <%}
              else { Response.Write("<span class='fy_text' style='width:48; border:solid 1px #CCCCCC; color:#cccccc'>下一页</span>"); }%>
</div>
    </form>
</body>
</html>

net_xxl519
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET中自定义DataGrid分页设置的实现
03-04
在 DataGrid 的 PagerStyle 中，我们将 Visible 设置为 False，这是因为我们要自定义分页按钮。 接下来，我们需要添加自定义的分页按钮。我们需要添加四个 LinkButton，分别用于首页、上一页、下一页和尾页。 在...
ASP .Net GridView CSS 模板样式
08-30
5. **分页样式**：若使用GridView的内置分页功能，可以通过`PagerStyle`属性来定制分页栏的样式。如果需要更高级的分页样式，可以考虑使用自定义分页控件或者JavaScript库。 6. **响应式设计**：为了适应不同设备的...
通过通过分别配置 PagerStyle 和 PagerSettings 属性，自定义页导航的样式和设置
~~程序是门艺术，而我却在艺术之门之外~~ IT草根专栏
06-03 2507
 关键代码段：         LastPageImageUrl="~/Images/Last.gif" NextPageImageUrl="~/Images/Next.gif" PreviousPageImageUrl="~/Images/Prev.gif" />      全部代码：  Sorting Data Using GridView            AutoGener
AspNettPager分页样式收集
HRoger
05-01 162
/**网易风格**/.anpager .cpb{    background: #1F3A87 none repeat scroll 0 0;    border: 1px solid #CCCCCC;    color: #FFFFFF;    font-weight: bold;    margin: 5px 4px 0 0;    padding: 4px 5px 0;    width:...
GridView+PagerStyle+css
weixin_34306676的博客
04-03 146
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CssClass="GridViewStyle" GridLines="None"> <Columns&...
android gridview分页显示,GridView使用自带分页功能时分页方式及样式PagerStyle
weixin_36079903的博客
05-26 552
GridView分页，使用自带分页功能，类似下面样式：在aspx页面中，GridView上的PagerStyle下CssClass属性，设置为bubufxPagerCss，具体aspx页面代码：AllowPaging="True" EmptyDataText="没有数据记录！！" OnPageIndexChanging="GridView1_PageIndexChanging"ShowHeader...
GridView.PagerTemplate 属性
ssharet的博客
04-17 747
获取或设置 GridView 控件中页导航行的自定义内容。 命名空间:System.Web.UI.WebControls 程序集:System.Web（在 system.web.dll 中） 属性值 一个 System.Web.UI.ITemplate，包含页导航行的自定义内容。默认值为 null，表示未设置此属性。 启用分页功能时（即 Allow
瞻远.Net分页控件源码 v1.0
04-02
　二、无限扩展自定义样式,灵活； 　三、支持所有asp.net控件分页绑定； 四、分页效率高； 　五、扩展方便、灵活性高； 　六、支持所有浏览器,文档类型、兼容性高； 使用方法： * 24种分页样式复制粘贴开始（名称...
在ASP.NET中使用CSS的Gridview Pager样式
04-05
然后，你可以使用ASP.NET的`.RowStyle`属性或者`PagerStyle`属性来指定PagerRow的样式。例如： ```asp.net <asp:GridView ID="GridView1" runat="server" CssClass="gridView" PagerStyle-CssClass="gridViewPager...
分页控件 ASP.Net
07-21
- `PagerStyle`：设置整个分页区域的样式，如背景色、边框等。 - `PageButtonToLastText`和`PageButtonToNextText`：修改“上一页”和“下一页”按钮的文本。 - `FirstPageText`和`LastPageText`：自定义“首页”和...
GridView控件详解
HYj3273254693的博客
02-15 6231
C#中GridView控件的属性
GridView,Repeater分页控件:WebPager(开源)
weixin_34010949的博客
10-25 99
一、特点: 可以用在母板、MS Ajax等控件嵌套的任何地方，支持GridView,Repeater等数据控件的分页。 二、属性: 1. PagerStyle: 设置分页样式(NextPrev,NumericPages) 2. ControlToPaginate: 指定要实现分页的控件ID(数据控件本身不需要进行数据绑定了，只需对WebPager进行数据绑定就行了) 3. PageSiz...
动态控制datagrid中列的可见性visible
qq_43128070的博客
05-20 594
后台： public void BindData() { if (this.ViewState["type"].ToString() == "quyu") { string sql = "select id,变更内容名称,变更前等级,变更后等级,等级变更时间 from 等级变更记录 where 1=1 and 类型='风险区域'"; if (TextBox1.Text.Trim()....
asp.net中datalist分页
最新发布
03-16
ASP.NET中的DataList控件可以通过设置PageSize属性来实现分页。PageSize属性指定每页显示的记录数。当DataList绑定的数据源中的记录数超过PageSize时，DataList会自动分页显示数据。 要实现分页，还需要设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值