DataGrid控件使用技巧

2024-07-21 02:24:05

字體：大中小

來源：轉載

供稿：網友

國內最大的酷站演示中心!
將數據庫內容綁定至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，如果你現在還沒有的話。

上一篇：datagrid數據導出到excel文件給客戶端下載的幾種方法

下一篇：利用Repeater控件顯示主－從關系數據表