datagridview 自定义格式_怎么用有效样式建立目录
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的恶意。。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年9月15日 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
