为Datagrid定制样式

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数据,用您喜欢的方式

你可能感兴趣的:(datagrid)