導言

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

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

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

設定DataGrid格式

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

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

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


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

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

l BackColor — 設定背景顏色。

l Font — 設定DataGrid的字體信息。字體信息包括使用何種字體、字號，是否粗體，斜體等。

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

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

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

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

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

<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


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

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

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

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

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

l ItemStyle — 設定表格中每一行的樣式。

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

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

另一個方法是通過在Web 控件的標記中使用特別的樣式塊，如下所示：

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

<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>