Datagrid可以自动套用样式,但是如果我们自己需要定制样式,可以通过属性生成器来实现,除此之外一个更为强大的功能就是为他定制样式表,或者编写STYLE属性.
下面举一个例子,这个例子来源与www.codeproject.com
窗体名MyGrid.aspx
第一步:在一个空白窗体上添加一个Datagrid控件
第二步:切换到html文档视图,添加如下代码:
<
asp:DataGrid
id
="DataGrid2"
runat
="server"
AllowSorting
="True"
CssClass
="Grid"
AllowPaging
="True"
>
<
AlternatingItemStyle
CssClass
="GridAltItem"
></
AlternatingItemStyle
>
<
ItemStyle
CssClass
="GridItem"
></
ItemStyle
>
<
HeaderStyle
CssClass
="GridHeader"
></
HeaderStyle
>
<
PagerStyle
CssClass
="GridPager"
></
PagerStyle
>
</
asp:DataGrid
>
在<head></head>区内添加:
<
LINK
title
="Tan"
media
="screen"
href
="styles.css"
type
="text/css"
rel
="stylesheet"
>
<
LINK
title
="Blue"
media
="screen"
href
="styles2.css"
type
="text/css"
rel
="stylesheet"
>
<
LINK
title
="print"
media
="print"
href
="printstyles.css"
type
="text/css"
rel
="stylesheet"
>
第三步:点击项目->添加新项->样式表,取名分别为:styles.css styles2.css,printstyles.css
其中styles.css的内容:
1
H1
2
{
}
{ 3
font-size: medium;
4
color: peru;
5
font-family: Arial;
6
}
7
8
.Grid
9
{
}
{10
border: solid 1px Tan;
11
}
12
13
.Grid td
14
{
}
{15
border: solid 3px #FFFFFF;
16
margin: 3px 3px 3px 3px;
17
font-family: Arial;
18
padding: 5px 5px 5px 5px;
19
text-align: center;
20
}
21
22
.GridHeader
23
{
}
{24
font-weight: bold;
25
background-color: Tan;
26
}
27
28
.GridHeader a
29
{
}
{30
text-decoration: none;
31
color: LightGoldenrodYellow;
32
padding: 0px 15px 0px 15px;
33
}
34
35
.GridHeader a:hover
36
{
}
{37
text-decoration: underline;
38
background: Tan url(images/spin.gif) no-repeat 0 100%;
39
}
40
41
.GridItem, .GridAltItem
42
{
}
{43
font-size: smaller;
44
}
45
46
.GridItem
47
{
}
{48
background-color: LightGoldenrodYellow;
49
}
50
51
.GridAltItem
52
{
}
{53
background-color: PaleGoldenrod;
54
}
55
56
.GridPager
57
{
}
{58
font-size: small;
59
background-color: LightGoldenrodYellow;
60
}
第四步:填充datagrid数据,用您喜欢的方式
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
