Wizard 編程網

一位台灣的程序員，鑽研 OOP、ASP.NET、ADO.NET、Ajax、Control & Component development、Performance Tuning
博客园 首页 新随笔 联系 订阅 管理
  33 Posts :: 0 Stories :: 104 Comments :: 1 Trackbacks
替 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 控件。

figure 1
圖 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="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>

<script Language="VB" runat="server">

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

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

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

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

 

posted on 2008-06-27 01:09 WizardWu 阅读(2041) 评论(12)  编辑 收藏 所属分类: ASP.NET 2.0 & Ajax

Feedback

#1楼  2008-06-27 01:16 TerryLee      
1.x - 2.0 - 3.5
古董级别:)

  回复  引用  查看    

#2楼  2008-06-27 01:55 肥田小鱼 [未注册用户]
table控件不是很好使用,因为postback后状态不保存,但是它却比较灵活,没有了状态,性能方面也比较好.
  回复  引用    

#3楼  2008-06-27 02:21 初效过滤器 [未注册用户]
控件table问题。*
  回复  引用    

#4楼  2008-06-27 02:34 cnskyx [未注册用户]
感觉太复杂了 还是直接用DATAGRID比较好 性能也是一个问题
  回复  引用    

#5楼 [楼主] 2008-06-27 02:58 版工      
各位前輩大家好:

小弟沒有很深入研究 Table 控件，但我認為它的主要功能，是能以 .NET 語言撰寫代碼，去組出一個像是 HTML Table 的「表格式」畫面，但比 HTML 更靈活、功能更強，例如本文所述，會依 .NET 所下的 if…else 或 for...loop，自動在 Table 控件裡的每個 TableCell，去呈現不同顏色、跨欄跨列合併 Row 或 Cell，或用 .NET API 產生更豐富的應用。Table 控件與 GridView 控件，各有各的專長和適用的場合；在一些不需要數據庫當作來源的情況，即可優先使用 Table 控件。
  回复  引用  查看    

#6楼  2008-06-27 08:38 liyundong      
怎么不试试Repeater控件?它的功能也是很强大的,没有其他控件会生成很多的琐碎的代码,速度还是蛮快的.
  回复  引用  查看    

#7楼  2008-06-27 09:07 jillzhang      
一堆繁体字，看着累
  回复  引用  查看    

#8楼  2008-06-27 09:19 巫云      
根据原控件，改写个StockTable控件就是了，不要在页面代码控制，用控件属性控制。
  回复  引用  查看    

#9楼  2008-06-27 09:52 风海迷沙      
gridview中可以在rowdatabond事件中进行判断并写入颜色，代码应该比这个少很多。
  回复  引用  查看    

#10楼  2008-06-27 12:04 风海迷沙      
竟删了我的回贴。。。无语了。。。

`看到了，看来是缓存的问题
  回复  引用  查看    

#11楼 [楼主] 2008-06-27 12:26 版工      
各位前輩大家好:

Table 控件的功能，主要還是能以 .NET 語言，
達成類似 HTML table, tr, td 表格式的外觀，
但又能結合 VB, C# 語言的強大功能，
以完成客戶要求的各種 form 表單功能，
但又不需要像 FormView 控件去 binding 數據庫的數據。

若單以本帖範例二(圖 2) 的例子來看，
確實以 GridView 控件會更容易達到。
  回复  引用  查看    

#12楼  2008-06-27 15:31 Andrew1111 [未注册用户]
了解你的意思，不用在代码里面写Dim strBuilder As New StringBuilder
strBuilder.Appdend("<table> <tr style=""> ")，不用拼输出表单，用纯VB或是C#写确实是个很不错的主意
  回复  引用    


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-06-27 01:11 编辑过


相关链接:

最新IT新闻:
Google股价跌破329美元 61%员工期权价值归零
十年祭:昔日明星软件今何在?
六大可能出售IT企业名单：SUN领头或被猎走
Linux内核2.6.27正式到来
《星际争霸2》一分为三 各种族依次登场