DataGrid Web控制項深度曆險(2) Part1

來源:互聯網
上載者:User
datagrid|web|控制項 導言

在第一部分我們研究了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>


相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。