GridView:选定页面按钮(数字)样式

时间:2010-03-01 05:25:09

标签: asp.net

    <asp:GridView ID="GridView2" runat="server" 
        DataSourceID="SqlDataSource1" Width="100%" 
        ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333" 
        GridLines="both" onrowdatabound="GridView2_RowDataBound" 
        HorizontalAlign="Center" AllowPaging="True"  PageSize="25" 
        onrowcreated="GridView2_RowCreated">
        <PagerSettings Mode="NumericFirstLast" PageButtonCount="25" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Center" 
            VerticalAlign="Middle" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" 
            VerticalAlign="Middle" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" 
            HorizontalAlign="Center" VerticalAlign="Middle" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#999999" HorizontalAlign="Center" />
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" 
            HorizontalAlign="Center" />
    </asp:GridView>

alt text http://i036.radikal.ru/1003/af/f739bc95f5ab.jpg

我选择了6页...但是我看不到选定页面按钮和未选择页面按钮之间的区别:(如何为选定和未选择的页面按钮设置不同的字体?

1 个答案:

答案 0 :(得分:11)

Hai nCdy,

尝试设置

     <PagerSettings FirstPageText="First" LastPageText="Last" 
    Mode="NumericFirstLast" PageButtonCount="3" position="Bottom" />
  <PagerStyle CssClass="pagination" HorizontalAlign="Center" 
 VerticalAlign="Middle"/>

<强> CSS:

.pagination {
            font-size: 80%;
        }

.pagination a {
    text-decoration: none;
    border: solid 1px #AAE;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
    border: solid 1px #AAE;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;
}

现在您将看到所选的页码...