導(dǎo)言

在第一部分我們研究了DataGrid的基本功能，它可在HTML表格中顯示數(shù)據(jù)。在第一部分我么說(shuō)明了將數(shù)據(jù)庫(kù)內(nèi)容綁定至DataGrid是非常簡(jiǎn)單的，我們所要做的就是通過(guò)SQL查詢來(lái)生成一個(gè)DataReader對(duì)象，將DataGrid的DataSource屬性設(shè)為這個(gè)DataReader對(duì)象，然后調(diào)用DataGrid對(duì)象的DataBind()方法。剩下的事情就是將DataGrid放置到HTML中，它可通過(guò)如下代碼實(shí)現(xiàn)：

<asp:datagrid runat="server" />
就是這么簡(jiǎn)單。遺憾的是通過(guò)這種簡(jiǎn)單方法生成的DataGrid并不美觀。生成的DataGrid僅僅是一個(gè)封裝了DataReader中所有列和行的簡(jiǎn)單的HTML表格。

我們希望做到的是僅顯示DataReader中的部分列并且設(shè)定每一列的格式。并且希望設(shè)定諸如背景顏色、字體等可以應(yīng)用到整個(gè)表格的格式。最后，如果能夠?yàn)槊恳涣屑由献远�義的標(biāo)題就更好了。例如設(shè)定標(biāo)題的背景色為不同的顏色或字體為粗體。在這部分我們將研究如何完成所有這些任務(wù)！(DataGrid可以做更多的事情，我們將在今后一系列文章中看到如何對(duì)數(shù)據(jù)庫(kù)結(jié)果進(jìn)行分頁(yè)顯示，允許用戶對(duì)數(shù)據(jù)排序等。)

設(shè)定DataGrid格式

對(duì)于DataGrid我們有兩種設(shè)定格式的方法。第一種方法是在服務(wù)器端代碼中通過(guò)程序進(jìn)行設(shè)定。例如為了將DataGrid的背景色設(shè)定為紅色，可使用如下服務(wù)器端代碼：

<%@ Import Namespace="System.Drawing" %>
<script runat="server">
sub Page_Load(sender as Object, e as EventArgs)
...
DataGridID.BackColor = Color.Red
...
end sub
</script>
另一種設(shè)定顯示屬性的方法是在DataGrid Web控件的標(biāo)記中進(jìn)行設(shè)定。下面的代碼和上面的代碼效果是一樣的：

<asp:datagrid runat="server" BackColor="Red" />


我個(gè)人喜歡后一種方法。我發(fā)現(xiàn)在Web控件的標(biāo)記中設(shè)定顯示屬性比在服務(wù)器端代碼中設(shè)定要簡(jiǎn)潔。(請(qǐng)注意，對(duì)于服務(wù)器端代碼的方法，需要引入System.Drawing命名空間，才能通過(guò)Color.Red對(duì)顏色進(jìn)行引用；對(duì)于在Web控件的標(biāo)記中設(shè)定顯示屬性的方法，僅需寫上BackColor="Red"。我覺(jué)得后一種方法更可讀。)

讓我們看一下用于設(shè)定DataGrid格式的有用的屬性：

l BackColor — 設(shè)定背景顏色。

l Font — 設(shè)定DataGrid的字體信息。字體信息包括使用何種字體、字號(hào)，是否粗體，斜體等。

l CellPadding — 設(shè)定HTML表格中單元格內(nèi)的邊距。

l CellSpacing — 設(shè)定HTML表格中單元格之間的間距。

l Width — 設(shè)定HTML表格的寬度(可以以像素、百分比等為單位)

l HorizontalAlign — 設(shè)定表格在頁(yè)面上的對(duì)齊方式(左對(duì)齊、右對(duì)齊、居中、未設(shè)定)

一個(gè)使用上述屬性而使得表格變得漂亮的例子如下所示。請(qǐng)注意DataGrid的Font屬性是一個(gè)對(duì)象，它指向了FontInfo類，F(xiàn)ontInfo類包括Size, Name, Bold, Italic等屬性。為了設(shè)定Font對(duì)象所指向類的屬性，必須通過(guò)連字符(-)完成。這類似于VB.Net和C#語(yǔ)言中表示對(duì)象屬性的點(diǎn)(.)。

<asp:DataGrid runat="server" id="dgFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Bold="True" Font-Name="Verdana"
Font-Size="10pt" />
FAQID
Description
…
DateEntered
CatName

144
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)?

3/20/2001 2:53:45 AM
Getting Started

181
How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.

1/19/2002 3:12:07 PM
ASP.NET

…



Databases, Errors


是否印象深刻？通過(guò)幾行文本，我們改變了DataGrid的外觀，生成了一個(gè)居中、具有灰色和漂亮字體的HTML表格。

通過(guò)樣式發(fā)揮你的想象力

DataGrid Web控件包含一些樣式，你將發(fā)現(xiàn)通過(guò)樣式改變DataGrid的外觀非常有效。這些樣式支持很多屬性，包括BackColor、ForeColor、HorizontalAlign和 Width。(參考文檔可獲得更多信息)。DataGrid包括四類樣式：

l HeaderStyle — 設(shè)定頁(yè)眉的樣式。(頁(yè)眉指表格的最上面一行，它列出了每列的名稱。要顯示頁(yè)眉，需將DataGrid的ShowHeader屬性設(shè)為True(缺省為True) )

l FooterStyle —設(shè)定頁(yè)腳的樣式。(頁(yè)腳指表格的最下面一行。要顯示頁(yè)腳，需將DataGrid的ShowFooter屬性True(缺省為False))

l ItemStyle — 設(shè)定表格中每一行的樣式。

l AlternatingItemStyle — 設(shè)定表格中交替行的樣式。通過(guò)將ItemStyle和AlternatingItemStyle設(shè)為不同的值使得DataGrid便于閱讀。(可參考下面的示例)

和設(shè)定DataGrid的格式類似，樣式可通過(guò)程序或DataGrid Web控件的標(biāo)記進(jìn)行設(shè)定。如上所述，我個(gè)人喜歡使用Web控件的標(biāo)記并且將在示例中使用該方法。第一種方法與通過(guò)代碼設(shè)置DataGrid的格式類似，通過(guò)在對(duì)象后面加一個(gè)點(diǎn)。即如果想設(shè)定HeaderStyle的BackColor，可在代碼中通過(guò)HeaderStyle.BackColor=Color.Red實(shí)現(xiàn)。

另一個(gè)方法是通過(guò)在Web 控件的標(biāo)記中使用特別的樣式塊，如下所示：

<asp:DataGrid runat="server">
<HeaderStyle BackColor="Red" />
</asp:DataGrid>
兩種方法均可行。我發(fā)現(xiàn)嵌入標(biāo)記的方法便于閱讀，特別是當(dāng)你需要為眾多樣式設(shè)定眾多屬性時(shí)。下面的示例顯示如何美化先前的示例：

<asp:DataGrid runat="server" id="dgFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana"
Font-Size="10pt">
<HeaderStyle BackColor="Black" ForeColor="White"
Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
</asp:datagrid>