Change the skin of the Table Control in ASP. NET

Source: Internet
Author: User
In ASP. NET1.0, the most popular data display control is not a DataGrid (Asp. NET 2.0 gridview), which can be displayed in the web server memory, dataset/datatable in the "Table type data ". However, to process "table-based data" on the ASP. NET page, there is actually another inconspicuous table control (different from datatable ). Although the "display type" table control has limited built-in functions, it has a high degree of freedom. programmers can write code to design the appearance of the table, including: the retrieved data from the database can be instantly displayed across columns and columns, and different colors can be dynamically displayed based on the values in each storage cell. Therefore, the table control is like a "Hollow" display control. It does not provide many features and methods and must be created manually by the programmer, but it also reduces the burden, and can create more powerful functions than other controls.

However, the "table data" displayed through the table control cannot be saved after post-back. The table content must be re-constructed after each post-back operation. According to the msdn library, if a large number of modifications are expected, we recommend that you use the datalist or DataGrid Control instead of the table control.

  

Figure 1 Table Control Structure

1 is the object structure of the Table Control item. Each "cell" is equal to a tablecell object. All tablecells in the same column constitute a tablerow object, and all tablerow objects constitute an entire table control.

2 is the two table controls that are drawn in two different ways. The program code (VB. NET/ASP. NET 1.x) can be downloaded by the hyperlink at the bottom of this post.

  

Figure 2 dynamically display different colors based on the value of the storage Grid

Example 1: The first table control item (merging data columns)

<HTML>
<Body>
<H2> create a special table </H2>
<Asp: Table runat = "server" gridlines = "both" cellpadding = "4" id = "Table1" horizontalalign = "center">
<Asp: tablerow runat = "server">
<Asp: tablecell runat = "server" text = "name" 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 = "email" 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>

The stock statement in example 2 below displays different colors in tablecell instantly based on the values obtained from the database. You can write some specific display functions as sub-programs or functions as required by the project.

Example 2: The second table control item (dynamically displays different colors according to the "cell" value). The execution screen is shown in figure 2.

<% @ Import namespace = "system. Data" %>
<% @ Import 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
... Center...
'Datareader object link "stock table"
Myrd = mycmd. executereader ()
'Call the sub-program, use the datareader object to read the data table column by column, and then fill in the output table
Outputtotable (myrd)
'Close the connection of the database.
Myconn. Close ()
End sub
Sub outputtotable () sub outputtotable (RD as oledbdatareader)
Dim I as integer
Dim row as tablerow
Dim cell as tablecell
'Fill in the "Header" of the data table in the table
Row = new tablerow ()
Row. backcolor = drawing. color. Gold
For I = 0 to RD. fieldcount-1
Cell = new tablecell ()
Cell. Text = RD. getname (I) 'sets the header of column I read by datareader to tablecell.
Row. cells. Add (cell) 'to add tablecell to tablerow
Next
Table2.rows. Add (ROW)
'Read the data table one by one, and then add the data to the table in sequence.
While RD. Read ()
Row = new tablerow ()
For I = 0 to RD. fieldcount-1
Cell = new tablecell ()
Cell. Text = RD. Item (I) 'sets column I of the datareader to tablecell.
Row. cells. Add (cell) 'to add tablecell to 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) & gt; 200 then
Cell. backcolor = drawing. color. hotpink
Cell. forecolor = drawing. color. lightsteelblue
End if
Next
Table2.rows. Add (ROW) 'adds tablerow to the table.
End while
End sub
</SCRIPT>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.