ASP.NET - ASP | Table - 《.Net 学习历程》

一、Table 控件的属性：
二、Tablelrow对象的主要属性
三、TableCell对齐的主要属性
四、单元格动态合并
五、实例
- 1.实例一
- 2. 实例二

一、Table 控件的属性：

1. CellPadding属性

用于设置表中单元格的边框和内容之间的距离（以像素为单位）。默认为-1（未设置）。

2. CellSpacing属性

用于设置表中单元格之间的距离（以像素为单位）。默认为-1（未设置）。

3. Rows 属性

用于获取表行的集合。主要属性和方法如下：

Count属性：表示Rows集合的元素个数（即表的行数）；
Add方法：用于添加一个新的TableRow对象（即向表中添加一行）；
AddAt方法：用于在指定的位置添加一个新的TableRow对象（即向表中插入一行）；
Remove方法：用于移除一个TableRow对象（即从表中移除一行）；
RemoveAt方法：用于移除指定索引值的TableRow对象（即从表中移除指定索引值的行）；
Clear方法：清除Rows集合中的所有元素（即清除表中的所有行）。可用Row(i)表示Rows集合中的第i个元素（从0算起）

4. GridLines属性

用于指定Table控件中显示的格线样式，可能的样式值有：

None：不显示单元格边框；
Horizontal：只显示单元格的水平框；
Vertical：只显示单元格的垂直边框；
Both：同时显示水平边框和垂直边框。

5. HorizontalAlign属性

用于设置表中内容的水平对齐方式。可能的对齐方式如下：

Center：居中；
Left：左对齐；
NoSet：未设置；
Right：右对齐；
Justify：表的内容均可展开，与左右边距对齐。

二、Tablelrow对象的主要属性

1. Cells属性

表示表行中单元格的集合。Cell集合的主要属性和方法如下：

Count属性：表示Cells集合的元素个数（即列数）；
Add方法：用于添加一个新的TableCell对象（即向表中添加一个单元格）；
AddAt方法：用于在指定的位置添加一个新的TableCell对象（即向表行中插入一个单元格）；
Remove方法：用于移除一个TableCell对象（即从表行中移除一个单元格）；
RemoveAt方法：用于移除指定索引值的TableCell对象（即从表行中移除指定索引值的单元格）；
Clear方法：清除Cells集合中的所有元素（即清除表行中的所有单元格）；

可用Cells(j)表示Cells集合中的第j个元素（从0算起）。

2. HorizontalAlign属性

用于设置行内容的水平对齐方式。可能的对齐方式值同Table控件的HorizontalAlign属性值。

3. VerticalAlign属性

用于指定行内容的垂直对齐方式。可能的对齐方式值有：

NotSet：未设置对齐方式；
Top：行内容与行的上边缘对齐；
Middle：行内容的垂直方向居中对齐；
Bottom：行内容与行的下边缘对齐。

三、TableCell对齐的主要属性

1. ColumnSpan属性

表示该单元格在呈现出的表中所跨越的列数。例如，如果ColumnSpan属性值为2，表示该单元格在Table控件中占两列。

2. HorizontalAlign属性

用于设置列内容的水平对齐方式，其属性值及含义同Table控件的HorizaontalAlign属性。

3. RowSpan属性

表示该单元格在呈现出的表中所跨越的行数。例如，如果RowSpan属性值为2，表示该单元格在Table控件中占两行。

4. VerticalAlign属性

用于指定列内容的垂直对齐方式，其属性值及含义同TableRow对象的HorizontalAlign属性值类似，不同的是它指定列内容为垂直对齐方式。

5. Wrap属性

属性值决定是否允许单元格内容在单元格内换行。如果对允许换行，则属性值为True，否则为False。

四、单元格动态合并

1. 引言

Table 控件可以用给定的静态内容在设计时生成表, 但Table 控件的威力通常在用动态内容以编程方式生成表时才会体现出来。Table 控件允许生成HTML 表并以直接方式指定其属性。Table 类主要由控件开发人员使用。
所有的Web 控件都有两个基本属性, 第一个属性是runat =”server”, 它告诉ASP.NET 在服务器上处理控件, 并为控件执行所有的ASP.NET 功能, 包括状态的创建。第二个属性是ID, 指明该控件的唯一标识代号, 以便在代码中操纵该控件。
Table 控件主要由3 个组件组成:Table、TableRow和TableCell。

2. 动态创建表

动态地创建一个表一般包含三个步骤:
( 1) 在.aspx 文件中, 在里用一个asp 标签创建Table1 控件, Table1 就是一个对象。

<body>
<form id="Form1" method="post" runat="server">
<asp:Table id="Table1" runat="server"> </asp:Table>
</body>

Table 的具体生成可在中通过函数写在.aspx文件中完成, 也可直接写在.cs 文件中。在具体生成上根据如下过程的:
( 2) 创建表格行对象TableRow(), 并向表中添加该行, 根据需要设置表格行的相关属性。
( 3) 创建表格单元格对象TableCell(), 并向表行中添加该单元格, 根据需要设置单元格的相关属性。
( 4) 对表中的各行重复(2)(3)过程。
实现方法的核心代码如下:

private void DrawTable (ref Table table, ref int seed)
{
    TableRow r ; // 表格行对象
    TableCell c ; // 表格单元格对象
    for(int k=0; k<10; k++) // 行数控制
    {
        int s = 0; // 列标识变量
        r = new TableRow(); table.Rows.Add(r); // 创建行
        // 第0 列
        c = new TableCell(); r.Cells.Add(c); // 创建列
        c.ID = ProduceID(ref seed, s++);
        c.Text = k.ToString(); // 第0 列内容
        // 第1 列
        c = new TableCell(); r.Cells.Add(c); // 创建列
        c.ID = ProduceID(ref seed, s++);
        c.Text = k.ToString(); // 第1 列内容
    }
}

上述创建的是一个表格的表体的结构, 其内容根据具体需要可从数据库中获得。

3. 表格标题行的创建与单元格合并

实际上, 表格标题行是按行构成的。如下面的示例表格中”院系”、”专业”、”班级”、”招生”和”备注”是第0 行, 而”人数”和”女生”是第1 行。其中”院系”、”业”、”班级”和”备注”占2 行, “招生”占2 列。
单元格合并主要用到单元格的RowSpan 和ColumnSpan 两个属性。实现示例表格标题行的核心代码如下:

private void SetTableHead(Table table, ref int seed)
{ // 第0 行
    TableRow r = new TableRow(); table.Rows.Add(r);
    TableHeaderCell h; // 标题行单元格对象
    string[] sa1 = {"院系", "专业", "班级"};
    for (int col = 0; col < 3; col++)
    {
        h = new TableHeaderCell(); r.Cells.Add(h); // 创建列
        h.RowSpan = 2; // 占2 行
        h.ID = ProduceID(ref seed, col);
        h.Text = sa1[col];
    }
    h = new TableHeaderCell(); row1.Cells.Add(h);
    h.ColumnSpan = 2; // 占2 列
    h.Text = "招生";
    h = new TableHeaderCell(); row1.Cells.Add(h);
    h.RowSpan = 2; // 占2 行
    h.Text = "备注";
    // 第1 行
    r = new TableRow(); table.Rows.Add(r); // 创建行
    h = new TableHeaderCell(); r.Cells.Add(h); // 创建列
    h.Text = "人数";
    h = new TableHeaderCell(); r.Cells.Add(h);
    h.Text = "女生";
}

4. 表体单元格合并

由于表体中数据具有动态性的特点, 其纵向合并方法, 一般是逐行判断要合并的单元格里的值是否和上一行同列的相同,要是相同的话就合并, 不同的话就接着判断。
该方法的核心代码如下:

private void ColMerge(ref Table table, int col, int startRow)
{
    int rowsCount = table.Rows.Count;
    if (startRow >= rowsCount) return; // 超界返回
    int rSpan = 0; //单元格跨越的行数
    int s = startRow; //起始行
    string text1 = table.Rows[startRow].Cells[col].Text;
    for (int r = startRow; r < rowsCount; r++)
    {
        string text2 = GetCellByID(table.Rows[r], col).Text;
        if (text1.Equals(text2))
        {
            rSpan++;
            TableCell cell1 = GetCellByID(table.Rows[r], col);
            if(r! =s) table.Rows[r].Cells.Remove(cell1); //移除
        }
        else
        {
            GetCellByID(table.Rows[s], col).RowSpan=rSpan;
            rSpan = 0;
            s = r- - ;
            text1 = text2;
        }
    }
    GetCellByID(table.Rows[s], col).RowSpan=rSpan;
}

5. 调用

private int m_Seed = 0; //
private void Page_Load(object sender, System.EventArgs e)
{
    this.SetTableHead(Table1, ref m_Seed); // 标题行
    this.DrawTable(ref Table1, ref m_Seed); // 表体
    ColMerge(ref table, 0, 1); //从第1 行起合并第0 列
}

6. 表格控件相关操作类

public static class aspTable
{
    /// <summary>合并行
    /// </summary>
    /// <remarks>版权信息：http://www.qqextra.com，http://t.qq.com/ls_man，http://blog.csdn.net/ls_man 2013-06-21 14:20:36</remarks>
    /// <param name="tbl">Table</param>
    /// <param name="startRow">起始行</param>
    /// <param name="endRow">结束行</param>
    /// <param name="colIndex">要合并的列索引</param>
    public static void SetRowSpan(Table tbl, int startRow, int endRow, int colIndex)
    {
        int countRowSpan = 0;
        int spanRow = startRow;
        string spanText = tbl.Rows[startRow].Cells[colIndex].Text;
        for (int rowIndex = startRow; rowIndex <= endRow; rowIndex++)
        {
            string currentText = tbl.Rows[rowIndex].Cells[colIndex].Text;
            //内容是否相同
            if (currentText == spanText)
            {
                countRowSpan++;
                //移除被合并的单元格
                if (rowIndex != spanRow)
                {
                    tbl.Rows[rowIndex].Cells.RemoveAt(colIndex);
                }
            }
            else
            {
                //合并
                tbl.Rows[spanRow].Cells[colIndex].RowSpan = countRowSpan;
                //从此行再向下比较（重置）
                countRowSpan = 0;
                spanRow = rowIndex--;
                spanText = currentText;
            }
        }
        //合并最后一项
        tbl.Rows[spanRow].Cells[colIndex].RowSpan = countRowSpan;
    }
    /// <summary>合并行，支持多列
    /// </summary>
    /// <remarks><span style="font-family: Arial, Helvetica, sans-serif;">版权信息：http://www.qqextra.com，http://t.qq.com/ls_man，http://blog.csdn.net/ls_man</span><span style="font-family: Arial, Helvetica, sans-serif;"> 2013-06-21 15:24:34</remarks></span>
    /// <param name="tbl">Table</param>
    /// <param name="startRow">起始行</param>
    /// <param name="endRow">结束行</param>
    /// <param name="colIndex">要合并的列索引</param>
    public static void SetRowSpans(Table tbl, int startRow, int endRow, params int[] colIndexs)
    {
        ArrayList al = new ArrayList(colIndexs);
        al.Sort();
        for (int i = al.Count - 1; i >= 0; i--)
        {
            SetRowSpan(tbl, startRow, endRow, (int)al[i]);
        }
    }
}

需要注意的几点，起始行一般设置为1，因为0是标题行；结束行一般设置为Table的总行数-1即可（最后一行）。

五、实例

以上是Table 控件的属性介绍，下面是我的一个实例：

1.实例一

1. 添加table的表头：

/// <summary>
///  添加表单表头
/// </summary>
/// <param name="tb">表格</param>
/// <param name="title">标题数组</param>
/// <param name="BorderColor">边框颜色</param>
/// <param name="BorderWidth">边框宽度</param>
/// <param name="Bold">是否粗体</param>
/// <param name="Size">字体大小</param>
/// <param name="Width">单元格宽度</param>
/// <param name="RomBackColor">行背景颜色</param>
public void AddTableHeader(ref Table tb, string[] title, System.Drawing.Color BorderColor, int BorderWidth, bool Bold, int Size, int[] Width, System.Drawing.Color  RomBackColor)
{
    TableHeaderRow tHeadRow = new TableHeaderRow();
    for (int i = 0; i < title.Count(); i++)
    {
        TableHeaderCell tHeadCell1 = new TableHeaderCell();
        tHeadCell1.Text = title[i].ToString();
        tHeadCell1.BorderColor = System.Drawing.Color.Black;
        tHeadCell1.BorderWidth = 1;
        tHeadCell1.Font.Bold = true;
        tHeadCell1.Font.Size = 15;
        tHeadCell1.Width = Width[i];
        tHeadRow.Cells.Add(tHeadCell1);
    }
    tHeadRow.BackColor = RomBackColor;
    tb.Rows.Add(tHeadRow);
}

2. 向table添加一行

  /// <summary>
/// 向指定的表格添加行数据
/// </summary>
/// <param name="tb">表格</param>
/// <param name="dt">需要添加的行的数据</param>
/// <param name="BorderColor">边框颜色</param>
/// <param name="windth">边框宽度</param>
/// <param name="ha">左右对齐格式</param>
/// <param name="RowSpan">跨行数</param>
/// <param name="SpanCell">设置跨越的单元格</param>
public void AddTableRow(ref Table tb, string[] arr, System.Drawing.Color BackColor, int BorderWidth, HorizontalAlign ha, int RowSpan, string SpanCell)
{
    string[] str=null;
    if (!string.IsNullOrEmpty(SpanCell))
    {
        str = SpanCell.Split(',');
    }
    TableRow newTr = new TableRow();
    for (int i = 0; i < arr.Count(); i++)
    {
        TableCell newTC1 = new TableCell();
        newTC1.Text = arr[i].ToString();
        newTC1.BorderWidth = BorderWidth;
        if (str != null)
        {
            for (int j = 0; j < str.Count(); j++)
            {
                if ((i + 1) == Convert.ToInt32(str[j]))
                {
                    newTC1.RowSpan = RowSpan;
                    newTC1.BackColor = System.Drawing.Color.White;
                    break;
                }
                else
                    newTC1.BackColor = BackColor;
            }
        }
        else { newTC1.BackColor = BackColor; }
        newTC1.HorizontalAlign = ha;
        newTr.Cells.Add(newTC1);
    }
    tb.Rows.Add(newTr);
}

3. 调用方法：

tbBuild.AddTableRow(ref tbAnswerCountRpt, arr, System.Drawing.Color.GreenYellow, 1, HorizontalAlign.Center, Convert.ToInt32(dt.Rows[i]["anscount"]), "1,2");

4. 结果

ASP | Table - 图1

2. 实例二

在aspx.cs中添加以下代码实现动态创建

protected void Page_Load(object sender, EventArgs e)
{
    string[] name =  {"妹妹","哥哥"};
    string[] number = { "201924111", "201924112" };
    for (int i= 1;  i<=2; i++)
    {
        TableRow row = new TableRow();//建立一个行对象
        TableCell cellNumber = new TableCell();  //建立第一个单元格对象 
        TableCell cellName = new TableCell();
        TableCell cellInput = new TableCell();
        cellNumber.Text = number[i - 1];
        cellName.Text = name[i - 1];
        TextBox txtInput = new TextBox();//建立一个文本框对象
        cellInput.Controls.Add(txtInput);//添加文本框对象到第三个单元格中
        row.Cells.Add(cellNumber);//添加第一个单元格到行对象
        row.Cells.Add(cellName);
        row.Cells.Add(cellInput);
        tblScore.Rows.Add(row);//添加行对象到表格对象
    }
}

aspx完整代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Table.aspx.cs" Inherits="Chap2_Table" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Table ID="tblScore" runat="server">
                <asp:TableRow runat="server">
                    <asp:TableCell runat="server">学号</asp:TableCell>
                    <asp:TableCell runat="server">姓名</asp:TableCell>
                    <asp:TableCell runat="server">成绩</asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </div>
    </form>
</body>
</html>

aspx.cs完整代码

using System;
using System.Web.UI.WebControls;
public partial class Chap2_Table : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string[] name =  {"妹妹","哥哥"};
        string[] number = { "201924111", "201924112" };
        for (int i= 1;  i<=2; i++)
        {
            TableRow row = new TableRow();//建立一个行对象
            TableCell cellNumber = new TableCell();  //建立第一个单元格对象 
            TableCell cellName = new TableCell();
            TableCell cellInput = new TableCell();
            cellNumber.Text = number[i - 1];
            cellName.Text = name[i - 1];
            TextBox txtInput = new TextBox();//建立一个文本框对象
            cellInput.Controls.Add(txtInput);//添加文本框对象到第三个单元格中
            row.Cells.Add(cellNumber);//添加第一个单元格到行对象
            row.Cells.Add(cellName);
            row.Cells.Add(cellInput);
            tblScore.Rows.Add(row);//添加行对象到表格对象
        }
    }
}