zoukankan      html  css  js  c++  java
  • 替 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=0Then
        cell.BackColor
    =Drawing.Color.Goldenrod
        cell.ForeColor
    =Drawing.Color.SteelBlue
       
    End IF

       
    If (I=Rd.FieldCount-4And Val(cell.Text)>0 Then 
        cell.BackColor
    =Drawing.Color.Red
        cell.ForeColor
    =Drawing.Color.Pink 
       
    ElseIf (I=Rd.FieldCount-4And Val(cell.Text)<0 Then 
        cell.BackColor
    =Drawing.Color.LawnGreen
        cell.ForeColor
    =Drawing.Color.GhostWhite
       
    End If

       
    If (I=Rd.FieldCount-3And Val(cell.Text)>20 Then 
        cell.BackColor
    =Drawing.Color.Pink
        cell.ForeColor
    =Drawing.Color.Red 
       
    End If

       
    If (I=Rd.FieldCount-2And Val(cell.Text)>17 Then 
        cell.BackColor
    =Drawing.Color.Pink
        cell.ForeColor
    =Drawing.Color.Red 
       
    End If

       
    If (I=Rd.FieldCount-1And Val(cell.Text)>2000 Then 
        cell.BackColor
    =Drawing.Color.Red
        cell.ForeColor
    =Drawing.Color.Pink 
       
    ElseIf (I=Rd.FieldCount-1And 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 控件中。您還可在範例二中,再加上「跨欄、跨列」的功能。至於還能達成哪些應用,則端看程序員的巧思了。

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

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

     

  • 相关阅读:
    创意吃鱼法
    雅礼上课
    坏掉的项链Broken Necklace
    2018-04-02练习
    【11月12日】Hadoop架构
    【11月10日】Redis 主从复制技术
    【11月10日】Redis 缓存系统常见问题及解决方案
    【11月9日】Redis 持久化
    【11月7日】Redis核心对象和数据类型
    【11月7日】Redis简介
  • 原文地址:https://www.cnblogs.com/WizardWu/p/1230833.html
Copyright © 2011-2022 走看看