GridView用CSS设定样式

最新推荐文章于 2021-08-04 01:25:07 发布

原创最新推荐文章于 2021-08-04 01:25:07 发布 · 6.8k 阅读

6 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用CSS简化GridView的数据控件样式设置，通过引用单独的样式处理单双行、Header、Pager、Footer等，同时探讨了利用CSS对GridView作为HTML table的样式调整，以及在IE8中遇到的CSS3兼容性问题。

该文章已生成可运行项目，

GridView是很便利的数据控件，在MIS中的应用很广泛，其样式编写很简单，但是每次新增都要重新编写，工作很是烦琐，而且由于其本身的特性，样式并不好编写，最好的办法就是在单双行、Header、Pager、Footer等栏目引用单独的样式，如下：

<asp:GridView ID="grvAdUserInfo" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" AllowPaging="True"
                PageSize="12" HorizontalAlign="Center" CssClass="GridView" OnPageIndexChanging="grvAdUserInfo_PageIndexChanging">
                <Columns>
                    <asp:BoundField DataField="EMPLOYEEID" HeaderText="工號" />
                    <asp:BoundField DataField="TRUENAME" HeaderText="姓名" />
                </Columns>
                <EmptyDataTemplate>
                    <span style="text-align: center; font-size: larger; font-weight: bolder; color: Blue;">抱歉，暫時沒有數據！</span>
                </EmptyDataTemplate>
                <AlternatingRowStyle CssClass="GridView_Row_Alter" />
                <PagerStyle CssClass="GridView_Pager" />
                <HeaderStyle CssClass="GridView_Header" />
                <RowStyle CssClass="GridView_Row" />
                <SelectedRowStyle CssClass="GridView_Row_Select" />
            </asp:GridView>

各样式如下：

/*****************GridView 樣式*******************/

/************GridView頁碼樣式************/
.GridView_Pager {
    background-color: #507CD1;
    font-weight: bold;
    color: white;
    height: 35px;
    font-size: 14px;
}

    .GridView_Pager td a:hover {
        width: 20px;
        color: white;
        padding-left: 4px;
        padding-right: 4px;
    }

    .GridView_Pager td a:active {
        width: 20px;
        color: white;
        padding-left: 4px;
        padding-right: 4px;
    }

    .GridView_Pager td a:link {
        width: 20px;
        color: white;
        padding-left: 4px;
        padding-right: 4px;
    }

    .GridView_Pager td a:visited {
        width: 20px;
        color: white;
        padding-left: 4px;
        padding-right: 4px;
    }

    .GridView_Pager td span {
        font-weight: bold;
        font-size: 15px;
        width: 20px;
        color: red;
        padding-left: 4px;
        padding-right: 4px;
    }

/******GridView標題欄樣式********/
.GridView_Header {
    color: white;
    background-color: #507CD1;
    height: 35px;
    font-size: 14px;
    font-weight: bold;
}

/**********GridView主樣式*************/
.GridView_Main {
    border-color: white;
    width: 100%;
}

/************GridView RowStyle************/
.GridView_Row {
    background-color: #EFF3FB;
    height: 25px;
    text-align: center;
    color: #333333;
}

.GridView_Row_Alter {
    background-color: white;
    height: 25px;
    text-align: center;
    color: #333333;
}

.GridView_Row_Select {
    background-color: #D1DDF1;
    color: #333333;
    font-weight: bold;
}

这是我现在使用的方法，对样式的设置只需引用，还是很方便的。但是我是一个不断追寻轻松的懒人，能不能只在GridView开头引用样式就一劳永逸呢？由于GridView实质上在HTML的表现为一个table，所以其实可以通过写table样式来对其进行设置，如下：

<asp:GridView ID="grvAdUserInfo" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" AllowPaging="True"
                PageSize="12" HorizontalAlign="Center" CssClass="GridView" OnPageIndexChanging="grvAdUserInfo_PageIndexChanging">
                <Columns>
                    <asp:BoundField DataField="EMPLOYEEID" HeaderText="工號" />
                    <asp:BoundField DataField="TRUENAME" HeaderText="姓名" />
                </Columns>
                <EmptyDataTemplate>
                    <span style="text-align: center; font-size: larger; font-weight: bolder; color: Blue;">抱歉，暫時沒有數據！</span>
                </EmptyDataTemplate>
            </asp:GridView>

样式文件如下：

/*****以下GridView的樣式目前還未完成，處於測試階段*********/
.GridView {
    width: 100%;
}

    .GridView th {
        color: white;
        background-color: #507CD1;
        height: 35px;
        font-size: 14px;
        font-weight: bold;
    }

    .GridView tr {
        background-color: #EFF3FB;
        height: 25px;
        text-align: center;
    }

        .GridView tr td {
            text-align: center;
        }

    .GridView td table {
        background-color: #507CD1;
        text-align: center;
    }

        .GridView td table td {
            text-align: center;
        }

            .GridView td table td A:hover {
                width: 20px;
                color: black;
                padding-left: 4px;
                padding-right: 4px;
            }

            .GridView td table td A:active {
                width: 20px;
                color: black;
                padding-left: 4px;
                padding-right: 4px;
            }

            .GridView td table td A:link {
                width: 20px;
                color: black;
                padding-left: 4px;
                padding-right: 4px;
            }

            .GridView td table td A:visited {
                width: 20px;
                color: black;
                padding-left: 4px;
                padding-right: 4px;
            }

            .GridView td table td span {
                font-weight: bold;
                font-size: 15px;
                width: 20px;
                color: red;
                padding-left: 4px;
                padding-right: 4px;
            }

这样设置看起来好像没有问题，但是并不能达到一些要求，比如单双行不同样式，页码Pager自定义样式等，由于在此之前对样式没有过了解，所以有待后期完善。而且还有一个问题，就是页码的居中，需要在GridView的属性中加上如下一句：