** 导言 **
在第一部分我们研究了 DataGrid 的基本功能,它可在 HTML 表格中显示数据。在第一部分我么说明了将数据库内容绑定至 DataGrid 是非常简单的,我们所要做的就是通过 SQL 查询来生成一个 DataReader 对象,将 DataGrid 的 DataSource 属性设为这个 DataReader 对象,然后调用 DataGrid 对象的 DataBind() 方法。剩下的事情就是将 DataGrid 放置到 HTML 中,它可通过如下代码实现:
1<asp:datagrid runat="server"></asp:datagrid>
就是这么简单。遗憾的是通过这种简单方法生成的 DataGrid 并不美观。生成的 DataGrid 仅仅是一个封装了 DataReader 中所有列和行的简单的 HTML 表格。
我们希望做到的是仅显示 DataReader 中的部分列并且设定每一列的格式。并且希望设定诸如背景颜色、字体等可以应用到整个表格的格式。最后,如果能够为每一列加上自定义的标题就更好了。例如设定标题的背景色为不同的颜色或字体为粗体。在这部分我们将研究如何完成所有这些任务! (DataGrid 可以做更多的事情,我们将在今后一系列文章中看到如何对数据库结果进行分页显示,允许用户对数据排序等。 )
** 设定 DataGrid 格式 **
对于 DataGrid 我们有两种设定格式的方法。第一种方法是在服务器端代码中通过程序进行设定。例如为了将 DataGrid 的背景色设定为红色,可使用如下服务器端代码:
```
@ Import Namespace="System.Drawing"
1另一种设定显示属性的方法是在 DataGrid Web 控件的标记中进行设定。下面的代码和上面的代码效果是一样的:
<asp:datagrid backcolor="Red" runat="server"></asp:datagrid>
1我个人喜欢后一种方法。我发现在 Web 控件的标记中设定显示属性比在服务器端代码中设定要简洁。 ( 请注意,对于服务器端代码的方法,需要引入 System.Drawing 命名空间,才能通过 Color.Red 对颜色进行引用;对于在 Web 控件的标记中设定显示属性的方法,仅需写上 BackColor="Red" 。 我觉得后一种方法更可读。 )
2
3让我们看一下用于设定 DataGrid 格式的有用的属性:
4
5l BackColor — 设定背景颜色。
6
7l Font — 设定 DataGrid 的字体信息。字体信息包括使用何种字体、字号,是否粗体,斜体等。
8
9l CellPadding — 设定 HTML 表格中单元格内的边距。
10
11l CellSpacing — 设定 HTML 表格中单元格之间的间距。
12
13l Width — 设定 HTML 表格的宽度 ( 可以以像素、百分比等为单位 )
14
15l HorizontalAlign — 设定表格在页面上的对齐方式 ( 左对齐、右对齐、居中、未设定 )
16
17一个使用上述属性而使得表格变得漂亮的例子如下所示。请注意 DataGrid 的 Font 属性是一个对象,它指向了 FontInfo 类, FontInfo 类包括 Size, Name, Bold, Italic 等属性。为了设定 Font 对象所指向类的属性,必须通过连字符 (-) 完成。这类似于 VB.Net 和 C# 语言中表示对象属性的点 (.) 。
<asp:datagrid backcolor="#eeeeee" font-bold="True" font-name="Verdana" font-size="10pt" horizontalalign="Center" id="dgFAQs" runat="server" width="85%"></asp:datagrid>
1** FAQID **
2
3|
4
5** Description **
6
7|
8
9** … **
10
11|
12
13** DateEntered **
14
15|
16
17** CatName **
18
19---|---|---|---|---
20
21** 144 **
22
23|
24
25** Where can I host my ASP Web site for _free_ (similar to GeoCities or Tripod or any of the many other free Web site sites)? **
26
27|
28
29** **
30
31|
32
33** 3/20/2001 2:53:45 AM **
34
35|
36
37** Getting Started **
38
39** 181 **
40
41|
42
43** How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency. **
44
45|
46
47** **
48
49|
50
51** 1/19/2002 3:12:07 PM **
52
53|
54
55** ASP.NET **
56
57** … **
58
59|
60
61** **
62
63|
64
65** **
66
67|
68
69** **
70
71|
72
73** Databases, Errors **
74
75是否印象深刻?通过几行文本,我们改变了 DataGrid 的外观,生成了一个居中、具有灰色和漂亮字体的 HTML 表格。
76
77** 通过样式发挥你的想象力 ** ** **
78
79DataGrid Web 控件包含一些样式,你将发现通过样式改变 DataGrid 的外观非常有效。这些样式支持很多属性,包括 BackColor 、 ForeColor 、 HorizontalAlign 和 Width 。 ( 参考文档可获得更多信息 ) 。 DataGrid 包括四类样式:
80
81l HeaderStyle — 设定页眉的样式。 ( 页眉指表格的最上面一行,它列出了每列的名称。要显示页眉,需将 DataGrid 的 ShowHeader 属性设为 True( 缺省为 True) )
82
83l FooterStyle —设定页脚的样式。 ( 页脚指表格的最下面一行。要显示页脚,需将 DataGrid 的 ShowFooter 属性 True( 缺省为 False))
84
85l ItemStyle — 设定表格中每一行的样式。
86
87l AlternatingItemStyle — 设定表格中交替行的样式。通过将 ItemStyle 和 AlternatingItemStyle 设为不同的值使得 DataGrid 便于阅读。 ( 可参考下面的示例 )
88
89和设定 DataGrid 的格式类似,样式可通过程序或 DataGrid Web 控件的标记进行设定。如上所述,我个人喜欢使用 Web 控件的标记并且将在示例中使用该方法。第一种方法与通过代码设置 DataGrid 的格式类似,通过在对象后面加一个点。即如果想设定 HeaderStyle 的 BackColor ,可在代码中通过 HeaderStyle.BackColor=Color.Red 实现。
90
91另一个方法是通过在 Web 控件的标记中使用特别的样式块,如下所示:
<asp:datagrid runat="server">
<headerstyle backcolor="Red"></headerstyle>
</asp:datagrid>
1两种方法均可行。我发现嵌入标记的方法便于阅读,特别是当你需要为众多样式设定众多属性时。下面的示例显示如何美化先前的示例:
<asp:datagrid backcolor="#eeeeee" font-name="Verdana" font-size="10pt" horizontalalign="Center" id="dgFAQs" runat="server" width="85%">
<headerstyle backcolor="Black" font-bold="True" forecolor="White" horizontalalign="Center"></headerstyle>
<alternatingitemstyle backcolor="White"></alternatingitemstyle>
</asp:datagrid>
1示例运行结果如下:
2
3** FAQID **
4
5|
6
7** Description **
8
9|
10
11** ViewCount **
12
13|
14
15** **
16
17|
18
19** FAQCategoryID **
20
21|
22
23** DateEntered **
24
25---|---|---|---|---|---
26
27144
28
29|
30
31Where can I host my ASP Web site for _free_ (similar to GeoCities or Tripod or any of the many other free Web site sites)?
32
33|
34
35161319
36
37|
38
39…
40
41|
42
4320
44
45|
46
473/20/2001 2:53:45 AM
48
49181
50
51|
52
53How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.
54
55|
56
57124398
58
59|
60
61|
62
6322
64
65|
66
671/19/2002 3:12:07 PM
68
69115
70
71|
72
73I am using Access and getting a 80004005 error (or a [Microsoft][ODBC Microsoft Access Driver] The Microsoft Jet database engine cannot open the file '(unknown)' error) when trying to open a connection! How can I fix this problem?
74
75|
76
77108377
78
79|
80
81|
82
8321
84
85|
86
871/17/2001 11:38:49 PM
88
89…
90
91|
92
93|
94
95|
96
97|
98
99|
100
101现在我们已经研究了如何使用样式以及如何设定 DataGrid 控件的全局显示属性 ( 格式 ) ,下面还需要研究一个主题:如何对每一个特定列设定样式和显示属性。我们将在本文第二部分讨论这项技术。