好看的GridView样式以及分页代码

来源：互联网发布：分析网络直播的利与弊编辑：程序博客网时间：2024/04/29 03:41

首先把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;
}

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

使用改样时候的gridView效果如下所示：

其中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="btnFirst" runat="server" CausesValidation="False"
                CommandName="Page" Text="首页" CommandArgument="first" OnClick="btnFirst_Click">
            </asp:LinkButton>
            <asp:LinkButton ID="btnPrev" runat="server" CausesValidation="False"
                CommandName="Page" Text="上一页" CommandArgument="prev" onclick="btnFirst_Click">
            </asp:LinkButton>
            <asp:LinkButton ID="btnNext" runat="server" CausesValidation="False"
                CommandName="Page" Text="下一页" CommandArgument="next" OnClick="btnFirst_Click">
            </asp:LinkButton>
            <asp:LinkButton ID="btnLast" runat="server" CausesValidation="False"
                CommandName="Page" Text="尾页" CommandArgument="last" OnClick="btnFirst_Click">
            </asp:LinkButton>
            <asp:TextBox ID="txtNewPageIndex" runat="server" Text='<%# ((GridView)Container.Parent.Parent).PageIndex + 1 %>'
                Width="20px" AutoPostBack="True"
                ontextchanged="txtNewPageIndex_TextChanged"></asp:TextBox>
            <asp:LinkButton ID="btnGo" runat="server" CausesValidation="False" CommandArgument="go"
                CommandName="Page" Text="GO" OnClick="btnFirst_Click"></asp:LinkButton>
        </td>
        </tr>
    </table>
</PagerTemplate>

方法btnFirst_Click的定义如下所示：

protected void btnFirst_Click(object sender, EventArgs e)
{
    switch (((LinkButton)sender).CommandArgument.ToString())
    {
        case "first":
            GridViewAmusement.PageIndex = 0;
            break;
        case "last":
            GridViewAmusement.PageIndex = GridViewAmusement.PageCount - 1;
            break;
        case "prev":
            GridViewAmusement.PageIndex = GridViewAmusement.PageIndex - 1;
            break;
        case "next":
            GridViewAmusement.PageIndex = GridViewAmusement.PageIndex + 1;
            break;
        case "go":
            {
                GridViewRow gvr = GridViewAmusement.BottomPagerRow;
                TextBox temp = (TextBox)gvr.FindControl("txtNewPageIndex");
                int res = Convert.ToInt32(temp.Text.ToString());
                GridViewAmusement.PageIndex = res - 1;
            }
            break;
    }
    BindData();//根据需要重新绑定数据源至GridView控件。
}