为ASP.NET的Table控件换个皮肤

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

　　下方范例二的股票行情表，会依数据库中捞出的数值，即时性地在 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>

posted @ 2010-04-11 18:59  夜色狼  阅读(332)  评论(0)  编辑  收藏  举报