替 ASP.NET 的 Table 控件換裝
(本文撰寫於 ASP.NET 1.x 時(shí)期，但觀念、做法亦適用 ASP.NET 2.0)
在 ASP.NET 1.0 中，最火紅的資料顯示控件非 DataGrid 莫屬 (ASP.NET 2.0 的 GridView 亦同)，其可顯示儲(chǔ)存在 Web server 記憶體中，DataSet/DataTable 裡的「表格式資料」。但在 ASP.NET 頁面中要處理「表格式資料」，事實(shí)上還有另一種較不起眼的 Table 控件 (不同於 DataTable)。該「顯示型」Table 控件雖然內(nèi)建的功能有限，但自由度反而較高，可由程序員自行撰寫程式碼去設(shè)計(jì)表格的外觀，包括：可「跨欄、跨列」即時(shí)顯示從數(shù)據(jù)庫撈出的資料；以及自訂依每個(gè)「儲(chǔ)存格 (TableCell)」裡的數(shù)值不同，動(dòng)態(tài)顯示不同的顏色。所以 Table 控件等於是一個(gè)「空心的」顯示型控件，很多特性和方法它都不提供，必須由程序員手工打造，但也因此少掉許多包袱，並可能創(chuàng)作出比其它控件更強(qiáng)大的功能。
不過透過 Table 控件顯示的「表格式資料」，無法在 Post-back 後保存下來，表格內(nèi)容必須在每次 Post-back 後再重新建構(gòu)。根據(jù) MSDN Library 的說法，若預(yù)期會(huì)進(jìn)行大量的修改，建議改用 DataList 或 DataGrid 控件來代替 Table 控件。
圖 1 Table 控件結(jié)構(gòu)圖
上圖 1 為 Table 控制項(xiàng)的物件結(jié)構(gòu)，每一個(gè)「儲(chǔ)存格」等於一個(gè) TableCell 物件，同一列的所有 TableCell 構(gòu)成一個(gè) TableRow 物件，而所有 TableRow 物件構(gòu)成一整個(gè) Table 控件。
下圖 2 是版工以兩種不同寫法，所繪製出的兩個(gè) Table 控件。程式碼 (VB.NET/ASP.NET 1.x) 可由本帖最下方的超連結(jié)下載。
圖 2 依「儲(chǔ)存格」數(shù)值變化，動(dòng)態(tài)顯示不同顏色
範(fàn)例一：第一個(gè) Table 控制項(xiàng) (合併資料列)
<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> 上方的範(fàn)例一當(dāng)中，使用了 RowSpan (合併資料列)，其為 TableCell 控件中內(nèi)建的屬性，除此之外該控件還提供 ColumnSpan 屬性。
下方範(fàn)例二的股票行情表，會(huì)依數(shù)據(jù)庫中撈出的數(shù)值，即時(shí)性地在 TableCell 中顯示不同顏色。您在使用上可依專案需求，將某些特定顯示功能寫成副程式或函數(shù)。
範(fàn)例二：第二個(gè) Table 控制項(xiàng) (依「儲(chǔ)存格」數(shù)值變化，動(dòng)態(tài)顯示不同顏色)，執(zhí)行畫面如上圖 2
<%@?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?物件連結(jié)「股票行情表」資料表
myRd?=?myCmd.ExecuteReader()
'?呼叫副程式，利用?DataReader?物件逐欄逐列讀取資料表，然後填入輸出用的表格
OutputToTable(?myRd?)
'?關(guān)閉資料庫連線
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?欄欄位抬頭設(shè)定給?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?欄資料設(shè)定給?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>
在範(fàn)例二中，ASP.NET 頁面用 DataReader 讀取資料，再把取得的資料填入 Table 控件中。您還可在範(fàn)例二中，再加上「跨欄、跨列」的功能。至於還能達(dá)成哪些應(yīng)用，則端看程序員的巧思了。
-------------------------------------------------
本帖的範(fàn)例源碼下載點(diǎn)：
http://files.cnblogs.com/WizardWu/060106.zip
-------------------------------------------------
(本文在版工的舊 Blog 中，發(fā)表日期為 2006/01/06)?
?
轉(zhuǎn)載于:https://www.cnblogs.com/WizardWu/archive/2008/06/27/1230833.html
總結(jié)
以上是生活随笔為你收集整理的替 ASP.NET 的 Table 控件換裝的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sql Server 清除日志的存储过程
- 下一篇： 让我们向他致敬