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)
     

     

  • 相关阅读:
    Leetcode 349. Intersection of Two Arrays
    hdu 1016 Prime Ring Problem
    map 树木品种
    油田合并
    函数学习
    Leetcode 103. Binary Tree Zigzag Level Order Traversal
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 101. Symmetric Tree
    poj 2524 Ubiquitous Religions(宗教信仰)
    pat 1009. 说反话 (20)
  • 原文地址:https://www.cnblogs.com/WizardWu/p/1230833.html
Copyright © 2011-2022 走看看