|
在ASPNET开发过程中DataGrid使用的频率是非常高的对于DataGrid的样式来说大家普遍使用的是自定义不同的颜色来应用于DataGrid的Header Footer EditItem SelectItem Item Page然而如果在每个页面都要对上述样式逐个设置工作效率可想而知了估计一天也出不了几个页面而且在VSNET中一个最大的BUG就是当我们对已经定义好的DataGrid重新布置页面布局时发觉其所有的事件会莫名其妙丢失或许有时候我们只好使用VSNET已经提供好的自动套用格式模板但有时候我们必须而且不由我们使用套用模板怎么办（比如客户的要求）下面我就讲解一下在DataGrid中应用样式文件来定义动态样式这样就解决了当客户对一套颜色配套方案不满意时可以花费几分钟的时间重新定义一套是不是效率会提高很多废话少说看看下面的csscss文件是怎么定义的 csscss文件内容 dg_header { fontweight :bold ; color:#FFFFCC; backgroundcolor :#; borderwidth: px; bordercolor :#CC; borderstyle :solid; } dg_alter { backgroundcolor :#FFEC; borderleftcolor:Green; borderwidth: px; bordercolor :#CC; borderstyle :solid; } dg_item { color :#; backgroundcolor:White ; borderwidth:px; bordercolor :#CC; borderstyle :solid; } dg_page { borderwidth: px; bordercolor :#CC; borderstyle :solid; } dg_item td dg_alter td /*Common Styles*/ { padding: px; border: solid px #ccc; } dg_header td { borderbottom: solid px #ccc; } dg_lb { color:#A; /*backgroundcolor:#BDF; */ background:url(/images/headergif) repeatx center center; fontweight:bold; } /* 底部的样式 */ dg_page table { textalign:center; margin:auto; } dg_page table td { border:px; padding:px;/*padding around pager numbers */ } dg_page td { bordertop: #ddd px solid;/*top border of pager*/ height:px; } dg_page a { color:#A; textdecoration:none; padding:px px px px; /*border around pager numbers*/ bordertop:solid px #EFFFC; borderright:solid px #cccccc; borderbottom:solid px #cccccc; borderleft:solid px #EFFFC; } dg_page a:hover { color: #BB; bordertop:solid px #FFFFF; borderright:solid px #; borderbottom:solid px #; borderleft:solid px #FFFFFF; } dg_page span { fontweight:bold; color:#; textdecoration:none; padding:px px px px; } 接下来的工作就是要应用此样式文件到页面的DataGrid中了 首先在页面<HEAD></HEAD>之间插入下面的语句 <link type=text/css rel=stylesheet> 然后选择页面上的DataGrid改变需要应用样式属性值的CssClass 例如点击HeaderStyle属性左边的十字打开选项给CssClass应用样式dg_header 最后绑定DataGrid看看是不是样式已经应用上了如果没有应用上有两种可能 去掉系统自动套用样式 察看csscss文件是否定义正确 DataGrid 的 示例代码: <asp:DataGrid ID=gridView_CIQCompPar runat=server AllowPaging=True AutoGenerateColumns=False DataKeyField=Id FooterStyleHeight=px Height=px OnPageIndexChanged=gridView_CIQCompPar_PageIndexChanged PageSize= Width=% CssClass=dg_perant> <Columns> </Columns> <FooterStyle CssClass=Height:px Height=px /> <PagerStyle CssClass=dg_page Height=px HorizontalAlign=Center NextPageText=下一页 PrevPageText=上一页 /> <AlternatingItemStyle CssClass=dg_alter /> <ItemStyle CssClass=dg_item Height=px /> <HeaderStyle CssClass=dg_header Height=px /> </asp:DataGrid> GridView 的 示例代码: <asp:GridView ID=GridView runat=server AllowPaging=True AutoGenerateColumns=False CssClass=dg_perant DataSourceID=ObjectDataSource Width=% OnDataBound=GridView_DataBound> <PagerStyle CssClass=dg_page /> <HeaderStyle CssClass=dg_header /> <RowStyle CssClass=dg_item /> <AlternatingRowStyle CssClass=dg_alter /> <PagerSettings FirstPageText=首页 LastPageText=最后 页 NextPageText=下 页 PreviousPageText=上 页 Mode=NumericFirstLast /> <Columns> </Columns> </asp:GridView> |
