DataGrid应用样式文件定义动态样式

datagrid|动态

DataGrid应用样式文件定义动态样式

hbzxf(阿好)
http://www.cnblogs.com/hbzxf

在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;
}

接下来的工作就是要应用此样式文件到页面的DataGrid中了

首先在页面<HEAD></HEAD>之间插入下面的语句

<link href="css.css" type="text/css" rel="stylesheet">

然后选择页面上的DataGrid,改变需要应用样式属性值的CssClass

例如:
点击HeaderStyle属性左边的十字打开选项,给CssClass应用样式dg_header

最后绑定DataGrid看看是不是样式已经应用上了,如果没有应用上有两种可能

1、去掉系统自动套用样式

2、察看css.css文件是否定义正确

时间: 2024-10-31 14:26:34

DataGrid应用样式文件定义动态样式的相关文章

动态样式语言Scss&amp;amp;Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读.Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css. Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (

动态样式加载的Javascript代码实例

文章简介:js动态样式加载. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&q

css样式的动态添加及显示和隐藏等零碎用法

 样式的动态添加: (其中红色字体是动态添加样式的语句),这是一个动态生成无序列表的函数,用来显示搜索到的wifi信号,其中有3个参数,wifi的名称.加密方式.信号强度. 代码如下: // create a network list item function newListItem(network, averageSignalStrength) { /** * A Wi-Fi list item has the following HTML structure: * <li> * <

javascript 动态样式添加的简单实现_javascript技巧

异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createLink方法用于创建一个style标签并添加到head标签中 2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容. <button id="demo">css文件</button> &l

JavaScript获取css行间样式,内连样式和外链样式的简单方法_javascript技巧

[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

应用-bootstrap自定义样式与原样式优先级问题

问题描述 bootstrap自定义样式与原样式优先级问题 <div class="form-group form-inline col-md-10 col-md-offset-1"> <label class="control-label">联系方式</label> <input class="input_of_sign form-control" style="margin-left: 2em

《版式设计——日本平面设计师参考手册》—第1章段落样式和字符样式的应用

段落样式和字符样式的应用 版式设计--日本平面设计师参考手册 前边介绍了有关段落样式与字符样式的基础知识,下面将讲解如何应用样式. 样式的应用与删除 应用段落样式时,可以将鼠标置于段落里的任何一处,接着再从面板里选择想使用的段落样式.如果想在不同的段落里应用同一种样式,则必须选择所有要应用的文字,才能完整地应用样式. 想为两个连续的段落应用相同段落样式时,可参考上图的选取方式. 选择字符样式里的"无"选项,可以删除文字目前的样式. 样式预览 在"段落样式选项"对话框

javascript在css样式中获取样式

问题描述 javascript在css样式中获取样式 <link href="beijingyangse.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript"> /*本函数的功能是判断浏览器的内核*/ function chank(enval) { var enval = enval.v

获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)_javascript技巧

可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current