DataGrid Web控件深度歷險(2) Part1
2024-07-21 02:24:24
供稿：網友
導言
在第一部分我們研究了datagrid的基本功能，它可在html表格中顯示數據。在第一部分我么說明了將數據庫內容綁定至datagrid是非常簡單的，我們所要做的就是通過sql查詢來生成一個datareader對象，將datagrid的datasource屬性設為這個datareader對象，然后調用datagrid對象的databind()方法。剩下的事情就是將datagrid放置到html中，它可通過如下代碼實現：
<asp:datagrid runat="server" />
就是這么簡單。遺憾的是通過這種簡單方法生成的datagrid并不美觀。生成的datagrid僅僅是一個封裝了datareader中所有列和行的簡單的html表格。
我們希望做到的是僅顯示datareader中的部分列并且設定每一列的格式。并且希望設定諸如背景顏色、字體等可以應用到整個表格的格式。最后，如果能夠為每一列加上自定義的標題就更好了。例如設定標題的背景色為不同的顏色或字體為粗體。在這部分我們將研究如何完成所有這些任務！(datagrid可以做更多的事情，我們將在今后一系列文章中看到如何對數據庫結果進行分頁顯示，允許用戶對數據排序等。)
設定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" />
我個人喜歡后一種方法。我發現在web控件的標記中設定顯示屬性比在服務器端代碼中設定要簡潔。(請注意，對于服務器端代碼的方法，需要引入system.drawing命名空間，才能通過color.red對顏色進行引用；對于在web控件的標記中設定顯示屬性的方法，僅需寫上backcolor="red"。我覺得后一種方法更可讀。)
讓我們看一下用于設定datagrid格式的有用的屬性：
l backcolor — 設定背景顏色。
l font — 設定datagrid的字體信息。字體信息包括使用何種字體、字號，是否粗體，斜體等。
l cellpadding — 設定html表格中單元格內的邊距。
l cellspacing — 設定html表格中單元格之間的間距。
l width — 設定html表格的寬度(可以以像素、百分比等為單位)
l horizontalalign — 設定表格在頁面上的對齊方式(左對齊、右對齊、居中、未設定)
一個使用上述屬性而使得表格變得漂亮的例子如下所示。請注意datagrid的font屬性是一個對象，它指向了fontinfo類，fontinfo類包括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表格。
通過樣式發揮你的想象力
datagrid web控件包含一些樣式，你將發現通過樣式改變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實現。
另一個方法是通過在web 控件的標記中使用特別的樣式塊，如下所示：
<asp:datagrid runat="server">
<headerstyle backcolor="red" />
</asp:datagrid>
兩種方法均可行。我發現嵌入標記的方法便于閱讀，特別是當你需要為眾多樣式設定眾多屬性時。下面的示例顯示如何美化先前的示例：
<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>
