DataGrid Web控件深度历险(2) Part1


** 导言 **

在第一部分我们研究了 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  控件的全局显示属性  (  格式  )  ,下面还需要研究一个主题:如何对每一个特定列设定样式和显示属性。我们将在本文第二部分讨论这项技术。
Published At
Categories with Web编程
Tagged with
comments powered by Disqus