Table Web 控件、TableRow Web 控件及TableCell Web 控件

发表于:2007-07-14来源:作者:点击数: 标签:
Table Web 控件的用法和传统的HTML 的Table 元素差异很大,为了将网页设计对象导向,Table内的列和字段也都跟着对象化了。前面我们已经提过HTML 控件的HtmlTable、HtmlTableRow、HtmlTableCell 这三个对象,基本上Table Web 控件里的使用方式和Table HTML 控


    Table Web 控件的用法和传统的HTML 的Table 元素差异很大,为了将网页设计对象导向,Table内的列和字段也都跟着对象化了。前面我们已经提过HTML 控件的HtmlTable、HtmlTableRow、HtmlTableCell 这三个对象,基本上Table Web 控件里的使用方式和Table HTML 控件没有什么差别。其使用语法为:

<ASP:Table
Id="被程序代码所控制的名称"
Runat="Server"
BackImageUrl="URL"
CellSpacing="像素"
CellPadding="像素"
GridLines="Both | Horizontal | None | Vertical"
HorziontalAlign="Center | Justify | Left | NotSet | Right"
/>

    Table Web 控件的基本属性如下所示:


    我们知道TableCell 对象是TableRow 的子对象,而TableRow 是Table 的子物件。只要利用TableRow.Cells.Add 及Table.Rows.Add 方法就可以建立这些对象的关系。表格的制作方式有两种,一是使用类似HTML 标注方法,另外一种是用程序动态新增。第一种方法如下范例码所示:

<Html>
<ASP:Table Id="Table1" BackImageUrl="vsback.gif" Border="1"
Runat="Server">
<ASP:TableRow>
<ASP:TableCell>第一列第一行</ASP:TableCell>
<ASP:TableCell>第一列第二行</ASP:TableCell>
<ASP:TableCell>第一列第三行</ASP:TableCell>
</ASP:TableRow>
<ASP:TableRow>
<ASP:TableCell>第二列第一行</ASP:TableCell>
<ASP:TableCell>第二列第二行</ASP:TableCell>
<ASP:TableCell>第二列第三行</ASP:TableCell>
</ASP:TableRow>
<ASP:TableRow>
<ASP:TableCell>第三列第一行</ASP:TableCell>
<ASP:TableCell>第三列第二行</ASP:TableCell>
<ASP:TableCell>第三列第三行</ASP:TableCell>
</ASP:TableRow>
</ASP:Table>
</Html>



    上面这个程序看起来和HTML标注里的Table 元素几乎一模一样,只不过是标注的名称改为Web控件的名称。另外字段内所要显示的的文字,除了使用上面程序的写法外上可写成下列的样式:

<ASP:TableCell Text="第一列第一行"/>

    第二种用程序来动态新增的方法和HtmlTable 控件一样,我们将HTML 控件的九九表范例改成用Web 控件来写,如下所示:

<Html>
<Form Id="Form1" Runat="Server">
<ASP:Table Id="Table1" Border="1" Runat="Server" Font-Size=14/>
<ASP:Button Id="Button1" Text="请按我" OnClick="Button1_Click"
Runat="Server"/>
</Form >
<Script Language="VB" Runat="Server">
Sub Button1_Click(Sender As Object, e As EventArgs)
Dim Cell As TableCell
Dim Row As TableRow
Dim X, Y As Short
For X=1 To 9 Step 1
Cell=New TableCell
For Y=1 To 9 Step 1
Cell.Text+=CStr(X) & " * " & CStr(Y) & " = " & CStr(X * Y)
If Y<>9 Then Cell.Text+="<br>"
Next Y
If X=1 Or X=4 Or X=7 Then Row=New TableRow
Row.Cells.Add(Cell)
If X=3 Or X=6 Or X=7 Then Table1.Rows.Add(Row)
Next X
End Sub
</Script>
</Html>

    上面这个程序的用法和HtmlTable 控件一样,只不过将Html 控件改成Web 控件罢了。要在表格中显示文字不是问题,若要在表格中放置控件也可以,只要使用TableCell 对象中Controls集合的Add 方法即可。下列范例码显示如何将对象放到表格中:

<Html>
<ASP:Table Id="Table1" BorderWidth="1px" GridLines="Both"
Cellspacing="0"
Cellpadding="1"
Runat="Server" />
<Script Language="VB" Runat="Server">
Sub Page_Load(Sender As Object,e As Eventargs)
Dim I, J As Short
For I=0 To 4
Dim Row As New TableRow
For J=0 to 3
Dim Cell As New TableCell
Cell.Text=" Column=" & J
If J=3 Then
Dim btnA As New Button
btnA.Text ="Column=3"
Cell.Controls.Add(btnA)
End If
Row.Cells.Add(Cell)
Next
Table1.Rows.Add(Row)
Next
End Sub
</Script>
</Html>


    上述程序代码要产生每一列的第四栏时,我们就撰写程序动态的产生一个Button 控件,然后将这个Button 控件的Text 属性设为Column=3 后,利用Controls 集合的Add 方法将Button 控件加入Cell 对象的Controls 集合对象中,最后产生一个第四个字段为Button 控件的4 乘5 表格。

原文转自:http://www.ltesting.net