替 ASP.NET 的 Table 控件換裝

(本文撰寫於 ASP.NET 1.x 時期，但觀念、做法亦適用 ASP.NET 2.0)

在 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>

上方的範例一當中，使用了 RowSpan (合併資料列)，其為 TableCell 控件中內建的屬性，除此之外該控件還提供 ColumnSpan 屬性。

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

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

<%@ Import Namespace =Namespace="System.Data" %>

<%@ Import Namespace =Namespace="System.Data.OleDb" %>

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 之中

　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

　　Table2.Rows.Add( row )　　　' 將 TableRow 加入 Table 之中

　End While

End Sub

</script>

在範例二中，ASP.NET 頁面用 DataReader 讀取資料，再把取得的資料填入 Table 控件中。您還可在範例二中，再加上「跨欄、跨列」的功能。至於還能達成哪些應用，則端看程序員的巧思了。

-------------------------------------------------
本帖的範例源碼下載點：
http://files.cnblogs.com/WizardWu/060106.zip

-------------------------------------------------
(本文在版工的舊 Blog 中，發表日期為 2006/01/06)

转载于:https://www.cnblogs.com/WizardWu/archive/2008/06/27/1230833.html

替 ASP.NET 的 Table 控件換裝相关推荐

ASP.NET中table控件去掉 td 之前的间隔
通过css设置了td的边框,发现之间存在间隔. 解决方法: table{ border-collapse:collapse; } 设置td边框是因为设置table的边框只有最外面一圈,而不是每行每列都 ...
ASP.net Table 控件
功能:在Web页中创建通用表. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-1(未设置). 2.CellSpacing属性:用于设置表中单 ...
创建用于 ASP.NET 的分页程序控件
Dino Esposito Wintellect 2003 年 10 月适用于: Microsoft® ASP.NET 摘要:解决向任何 ASP.NET 控件添加分页功能的问题.还为开发复合 ...
英文版资料[庖丁解牛—纵向切入Asp.net 3.5控件和组件开发技术]
英文版资料[庖丁解牛-纵向切入Asp.net 3.5控件和组件开发技术] . Carving Up an Ox * Book Name <Carving Up an Ox: In-depth A ...
构建安全的 ASP.NET 网页和控件
本页内容本模块内容目标适用范围如何使用本模块威胁和对策设计注意事项输入验证跨站点脚本身份验证授权模拟敏感数据会话管理参数处理异常管理审核和日志记录小结其他资源本模 ...
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】
================================ 欢迎转载,但是请注明出处.本文出自博客园 .谢谢合作! ================================ 最新版本:V ...
用JS验证asp.net服务端控件
可以用javascript来验证asp.net服务端的控件,不过目前只局限于验证textbox(输入框)不能为空的情况.还有一个前提条件是,提交按钮必须是html的控件,再加上一个runat=serv ...
ASP.NET如何给控件增加属性？
ASP.NET如何给控件增加属性? 今天xuedaonet给大家介绍提利用ASP.NET给控件增加属性的操作方法,请看下文! ASP.net给控件增加属性的思路因为用户控件也是一个类,双城计中计20 ...
利用ASP.NET2.0向导控件一步步建立与用户的交互--------提高和自定义用户体验
本文是利用ASP.NET2.0向导控件一步步建立与用户的交互--------基本概念的后续文章,介绍了Wizard控件的高级使用以提高用户使用体验. 单击下面链接进行查看 http://www.cnm ...

替 ASP.NET 的 Table 控件換裝

替 ASP.NET 的 Table 控件換裝相关推荐

最新文章

热门文章