GridView用CSS设定样式

来源：互联网发布：迁移阿里云rds到aws 编辑：程序博客网时间：2024/05/21 14:46

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的属性中加上如下一句：

HorizontalAlign="Center"

CSS还是很强大的，仔细研究说不定就能完善这个样式了。

经过多次测试，我已经可以确定了以上样式是可行的，不过IE8不支持CSS3，所以我一直以来都以为样式有问题。。

论来自IE8的恶意。。

0 0