datagridview 自定义格式_怎么用有效样式建立目录

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要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的恶意。。