DataGrid控件使用技巧
|
將數據庫內容綁定至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格式的有用的屬性：
BackColor — 設定背景顏色。
Font — 設定DataGrid的字體信息。字體信息包括使用何種字體、字號，是否粗體，斜體等。
CellPadding — 設定HTML表格中單元格內的邊距。
CellSpacing — 設定HTML表格中單元格之間的間距。
Width — 設定HTML表格的寬度(可以以像素、百分比等為單位)
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" /＞ |
是否印象深刻？通過幾行文本，我們改變了DataGrid的外觀，生成了一個居中、具有灰色和漂亮字體的HTML表格。
通過樣式發揮你的想象力
DataGrid Web控件包含一些樣式，你將發現通過樣式改變DataGrid的外觀非常有效。這些樣式支持很多屬性，包括BackColor、ForeColor、HorizontalAlign和 Width。(參考文檔可獲得更多信息)。DataGrid包括四類樣式：
HeaderStyle — 設定頁眉的樣式。(頁眉指表格的最上面一行，它列出了每列的名稱。要顯示頁眉，需將DataGrid的ShowHeader屬性設為True(缺省為True) )
FooterStyle —設定頁腳的樣式。(頁腳指表格的最下面一行。要顯示頁腳，需將DataGrid的ShowFooter屬性True(缺省為False))
ItemStyle — 設定表格中每一行的樣式。
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＞ |
示例運行結果如下：
現在我們已經研究了如何使用樣式以及如何設定DataGrid控件的全局顯示屬性(格式)，下面還需要研究一個主題：如何對每一個特定列設定樣式和顯示屬性。
但是如何設定DataGrid中列的顯示屬性？其實并不難，接著讀你就知道了。
設定哪些列應該顯示
缺省情況下DataGrid在生成的HTML表格中為SQL查詢返回的每一列生成一個對應的列。但是在一些情況下僅希望在DataGrid中顯示這些列中的一部分列。例如，在我正在進行的示例中，通過調用sp_Popularity存儲過程顯示了ASPFAQs.com最受歡迎的10個問題。它包含FAQID列，或許我并不希望顯示該列。
如果不想在DataGrid中顯示數據庫查詢返回的所有列，必須顯式地聲明所有希望顯示的列。第一步是將DataGrid的AutoGenerateColumns屬性設為False。一旦執行完這個操作，就需要通過BoundColumn Web控件設定需顯示的列，如下所示：
| ＜asp:DataGrid runat="server" AutoGenerateColumns="False"＞ ＜Columns＞ ＜asp:BoundColumn DataField="DatabaseColumnName1" ... /＞ ＜asp:BoundColumn DataField="DatabaseColumnName2" ... /＞ ... ＜asp:BoundColumn DataField="DatabaseColumnNameN" ... /＞ ＜/Columns＞ ＜/asp:datagrid＞ |
對于每一個希望顯示的列，需要通過一個包含DataField屬性的＜asp:BoundColumn ... /＞標記來指定數據庫中需要顯示的列。所有這些BoundColumn標記必須包含在Column標記內。(也可通過編程的方式指定這些綁定列，但是它的可讀性差，并且需要很多代碼!)請注意只有通過BoundColumn標記指定的列才會在DataGrid中顯示，你必須指定需要顯示的列!
BoundColumn控件的優點在于它包含一些設定格式的屬性，包括：
HeaderText — 設定列標題的文字。
FooterText — 設定列尾的文字(記住若要在DataGrid中顯示頁腳，應將ShowFooter設為True)。
HeaderStyle/FooterStyle/ItemStyle — 包含與DataGrid樣式相同的屬性。對設定列居中、前景色、背景色等很有用。
DataFormatString — 設置格式命令。(參考下面的示例；參考文檔以獲得全部的格式化規范)
讓我們看一下如何通過使用BoundColumn標記來進一步增強前面的示例。正如前面所提到的，我們不想顯示FAQID或FAQCategoryID列，并且我們希望對數字列(ViewCount)和日期/時間列(DateEntered)設定格式。另外，我們希望數字列的值居中。這些均可通過幾行易于閱讀易于理解的代碼完成：
| ＜asp:DataGrid runat="server" id="dgPopularFAQs" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Name="Verdana" CellPadding="4" Font-Size="10pt" AutoGenerateColumns="False"＞ ＜HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" /＞ ＜AlternatingItemStyle BackColor="White" /＞ ＜Columns＞ ＜asp:BoundColumn DataField="CatName" HeaderText="Category Name" /＞ ＜asp:BoundColumn DataField="Description" HeaderText="FAQ Description" /＞ ＜asp:BoundColumn DataField="ViewCount" DataFormatString="{0:#,###}" HeaderText="Views" ItemStyle-HorizontalAlign="Center" /＞ ＜asp:BoundColumn DataField="SubmittedByName" HeaderText="Author" /＞ ＜asp:BoundColumn DataField="SubmittedByEmail" HeaderText="Author's Email" /＞ ＜asp:BoundColumn DataField="DateEntered" HeaderText="Date Added" DataFormatString="{0:MM-dd-yyyy}" /＞ ＜/Columns＞ ＜/asp:datagrid＞ |
實際運行結果如下：
如上例所示，上述代碼指定了需要顯示的特定列并且應用了特定的格式。請注意DataFormateString看上去很有趣。它的格式始終是{0:format string}。{0: …}指定通過格式化字符串(由…指定的)來格式化第一個參數(第一個參數指由DataReader返回的那個特定列的值)。在示例中我使用了格式化字符串#,###，它在每3個數字前加上一個逗號；格式化字符串MM-dd-yyyy指定通過月、日和年的格式顯示日期/時間字段。
結論
花一些時間看一下第一個示例(見DataGrid Web控件深度歷險(1))和現在的示例。改進確實很大!請注意所有這些樣式和用戶界面的改進不需要寫一行代碼就可實現。我們只是在Web控件的標記中設定了一些屬性！事實上如果你正在使用類似Visual Studio .Net的編輯器， 你可通過點擊一些按鈕、選中一些復選框、選擇列表框的一些項來設定格式化選項。想象一下在傳統ASP中實現同樣效果需要編寫的那些冗長代碼，那會使你愛上ASP.Net，如果你現在還沒有的話。