首頁 > 開發者 > ASP

為ASP.NET的Table控制項換個皮膚

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
在 ASP.NET 1.0 中，最火紅的資料顯示控制項非 DataGrid 莫屬 (ASP.NET 2.0 的 GridView 亦同)，其可顯示儲存在 Web server 記憶體中，DataSet/DataTable 裡的“表格式資料”。但在 ASP.NET 頁面中要處理“表格式資料”，事實上還有另一種較不起眼的 Table 控制項 (不同於 DataTable)。該“顯示型”Table 控制項雖然內建的功能有限，但自由度反而較高，可由程式員自行撰寫程式碼去設計表格的外觀，包括：可“跨欄、跨列”即時顯示從資料庫撈出的資料;以及自訂依每個“儲存格 (TableCell)”裡的數值不同，動態顯示不同的顏色。所以 Table 控制項等於是一個“空心的”顯示型控制項，很多特性和方法它都不提供，必須由程式員手工打造，但也因此少掉許多包袱，並可能創作出比其它控制項更強大的功能。

　　不過透過 Table 控制項顯示的“表格式資料”，無法在 Post-back 後儲存下來，表格內容必須在每次 Post-back 後再重建立構。根據 MSDN Library 的說法，若預期會進行大量的修改，建議改用 DataList 或 DataGrid 控制項來代替 Table 控制項。

　　

　　圖 1　Table 控制項結構圖

　　 1 為 Table 控制項的物件結構，每一個“儲存格”等於一個 TableCell 物件，同一列的所有 TableCell 構成一個 TableRow 物件，而所有 TableRow 物件構成一整個 Table 控制項。

　　 2 是版工以兩種不同寫法，所繪製出的兩個 Table 控制項。程式碼 (VB.NET/ASP.NET 1.x) 可由本帖最下方的超連結下載。

　　

　　圖 2　依“儲存格”數值變化，動態顯示不同顏色

範例一：第一個 Table 控制項 (合并資料列)

<Html>
<Body>
<H2>特殊表格的製作</H2>
<ASP:Table Runat="Server" GridLines="Both" CellPadding="4" id="Table1" HorizontalAlign="Center">
<ASP:TableRow Runat="Server">
<ASP:TableCell Runat="Server" Text="姓名" BackColor="LightGreen"/>
<ASP:TableCell Runat="Server" Text="Stephen"/>
<ASP:TableCell Runat="Server" RowSpan="2">
　　<ASP:Image Runat="Server" ImageUrl="image/money.jpg" Width="40" Height="40"/>
</ASP:TableCell>
</ASP:TableRow>

<ASP:TableRow>
<ASP:TableCell Runat="Server" Text="電子郵件" BackColor="LightGreen"/>
<ASP:TableCell Runat="Server">
　　<ASP:HyperLink Runat="Server" Text="j2se@pchome.com.tw" NavigateUrl="mailto:j2se@pchome.com.tw"/>
</ASP:Tablecell>
</ASP:TableRow>
</ASP:Table>
<p>
<ASP:Table Runat="Server" GridLines="Both" CellPadding="4" id="Table2" HorizontalAlign="Center" />
</Body>
</Html>

　　下方範例二的股票行情表，會依資料庫中撈出的數值，即時性地在 TableCell 中顯示不同顏色。您在使用上可依專案需求，將某些特定顯示功能寫成副程式或函數。

　　範例二：第二個 Table 控制項 (依“儲存格”數值變化，動態顯示不同顏色)，執行畫面如 2

<%@ Import Namespace =Namespace="System.Data" %>
<%@ Import Namespace =Namespace="System.Data.OleDb" %>
<script Language="VB" runat="server">
Sub Page_Load()Sub Page_Load(sender As Object, e As EventArgs)
　Dim myConn As OleDbConnection
　Dim myCmd As OleDbCommand
　Dim myRd As OleDbDataReader
　　　　　…中間略…
　' DataReader 物件連結“股票行情表”資料表
　myRd = myCmd.ExecuteReader()
　' 呼叫副程式，利用 DataReader 物件逐欄逐列讀取資料表，然後填入輸出用的表格
　OutputToTable( myRd )
　' 關閉資料庫連線
　myConn.Close()
End Sub
Sub OutputToTable()Sub OutputToTable( Rd As OleDbDataReader )
　Dim I As Integer
　Dim row As TableRow
　Dim cell As TableCell
　' 將資料表的“抬頭”填入表格中
　row = New TableRow()
　row.BackColor = Drawing.Color.Gold
　For I = 0 To Rd.FieldCount - 1
　　cell = New TableCell()
　　cell.Text = Rd.GetName(I)　　' 將 DataReader 所讀取的第 I 欄欄位抬頭設定給 TableCell
　　row.Cells.Add( cell )　　　　　' 將 TableCell 加入 TableRow 之中
　Next
　Table2.Rows.Add( row )
　' 逐列讀出資料表，再將資料依序填入表格中
　While Rd.Read()
　　row = New TableRow()
　　For I = 0 To Rd.FieldCount - 1
　　　cell = New TableCell()
　　　cell.Text = Rd.Item(I)　　　' 將 DataReader 所讀取的第 I 欄資料設定給 TableCell
　　　row.Cells.Add( cell )　　　　' 將 TableCell 加入 TableRow 之中
　　　If (I=0) Then
　　　　cell.BackColor=Drawing.Color.Goldenrod
　　　　cell.ForeColor=Drawing.Color.SteelBlue
　　　End IF
　　　If (I=Rd.FieldCount-4) And Val(cell.Text)>0 Then
　　　　cell.BackColor=Drawing.Color.Red
　　　　cell.ForeColor=Drawing.Color.Pink
　　　ElseIf (I=Rd.FieldCount-4) And Val(cell.Text)<0 Then
　　　　cell.BackColor=Drawing.Color.LawnGreen
　　　　cell.ForeColor=Drawing.Color.GhostWhite
　　　End If
　　　If (I=Rd.FieldCount-3) And Val(cell.Text)>20 Then
　　　　cell.BackColor=Drawing.Color.Pink
　　　　cell.ForeColor=Drawing.Color.Red
　　　End If
　　　If (I=Rd.FieldCount-2) And Val(cell.Text)>17 Then
　　　　cell.BackColor=Drawing.Color.Pink
　　　　cell.ForeColor=Drawing.Color.Red
　　　End If
　　　If (I=Rd.FieldCount-1) And Val(cell.Text)>2000 Then
　　　　cell.BackColor=Drawing.Color.Red
　　　　cell.ForeColor=Drawing.Color.Pink
　　　ElseIf (I=Rd.FieldCount-1) And Val(cell.Text)>200 Then
　　　　cell.BackColor=Drawing.Color.HotPink
　　　　cell.ForeColor=Drawing.Color.LightSteelBlue
　　　End If
　　Next
　　Table2.Rows.Add( row )　　　' 將 TableRow 加入 Table 之中
　End While
End Sub
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More