DataGrid 与GridView 通用的样式文件
在ASP.NET开发过程中，DataGrid使用的频率是非常高的，对于DataGrid的样式来说大家普遍使用的是自定义不同的颜色来应用于DataGrid的Header, Footer, EditItem, SelectItem, Item, Page，然而如果在每个页面都要对上述样式逐个设置，
工作效率可想而知了，估计一天也出不了几个页面，而且在VS.NET中一个最大的BUG就是当我们对已经定义好的DataGrid重新布置页面布局时，发觉其所有的事件会莫名其妙丢失。或许有时候我们只好使用VS.NET已经提供好的自动套用格式模板，但有时候我们必须，而且不由我们使用套用模板怎么办（比如客户的要求），下面我就讲解一下在DataGrid中应用样式文件来定义动态样式，这样就解决了当客户对一套颜色配套方案不满意时，可以花费几分钟的时间重新定义一套，是不是效率会提高很多。废话少说看看下面的css.css文件是怎么定义的
css.css文件内容：
.dg_header{ font-weight :bold ;
color:#FFFFCC;
background-color :#990000;
border-width: 2px;
border-color :#CC9966;
border-style :solid;
}
.dg_alter
{
background-color :#FFE0C0;
border-left-color:Green;
border-width: 2px;
border-color :#CC9966;
border-style :solid;
}
.dg_item
{
color :#330099;
background-color:White ;
border-width:2px;
border-color :#CC9966;
border-style :solid;
}
.dg_page
{
border-width: 2px;
border-color :#CC9966;
border-style :solid;
}
.dg_item td, .dg_alter td /*Common Styles*/
{
padding: 5px;
border: solid 1px #ccc;
}
.dg_header td
{
border-bottom: solid 1px #ccc;
}
.dg_lb
{
color:#3861A3;
/*background-color:#B5D5F7;
*/ background:url(../images/header1.gif) repeat-x center center;
font-weight:bold;
}
/* 底部的样式 */
.dg_page table
{
text-align:center;
margin:auto;
}
.dg_page table td
{
border:0px;
padding:5px;/*padding around pager numbers */
}
.dg_page td
{
border-top: #1d1d1d 1px solid;/*top border of pager*/
height:40px;
}
.dg_page a
{
color:#3861A3;
text-decoration:none;
padding:2px 10px 2px 10px;
/*border around pager numbers*/
border-top:solid 1px #EFF7FC;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
border-left:solid 1px #EFF7FC;
} .dg_page a:hover { color: #2B974B; border-top:solid 1px #FFFFF4;
border-right:solid 1px #333333;
border-bottom:solid 1px #333333;
border-left:solid 1px #FFFFFF; }
.dg_page span
{
font-weight:bold;
color:#000000;
text-decoration:none;
padding:2px 10px 2px 10px;
}
首先在页面<HEAD></HEAD>之间插入下面的语句
然后选择页面上的DataGrid，改变需要应用样式属性值的CssClass
例如：点击HeaderStyle属性左边的十字打开选项，给CssClass应用样式dg_header
最后绑定DataGrid看看是不是样式已经应用上了，如果没有应用上有两种可能
1、去掉系统自动套用样式
2、察看css.css文件是否定义正确
DataGrid 的 示例代码:
| <asp:DataGrid ID="gridView_CIQCompPar" runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyField="Id" FooterStyle-Height="5px" Height="148px" OnPageIndexChanged="gridView_CIQCompPar_PageIndexChanged" PageSize="12" Width="100%" CssClass="dg_perant"> <Columns> </Columns> <FooterStyle CssClass="Height:5px" Height="5px" /> <PagerStyle CssClass="dg_page" Height="5px" HorizontalAlign="Center" NextPageText="下一页" PrevPageText="上一页" /> <AlternatingItemStyle CssClass="dg_alter" /> <ItemStyle CssClass="dg_item" Height="5px" /> <HeaderStyle CssClass="dg_header" Height="5px" /> </asp:DataGrid> |
GridView 的 示例代码:
|
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" CssClass="dg_perant" DataSourceID="ObjectDataSource1" Width="100%" OnDataBound="GridView1_DataBound"> |
【发表评论】【打印此文】【关闭窗口】【点击数： 】