摘自:http://www.cnblogs.com/ASPnet_yuan/archive/2010/12/22/Table.html
【摘要】: 在資訊查詢、統計等方面, 表中的儲存格相同部分適當合并, 會使表中資料非常直觀。本文討論了ASP.NET環境下, 使用C# 實現儲存格動態合并技術, 該方案對其它應用也有重要意義。
【關鍵詞】: ASP.NET, 合併儲存格, Table,Web 控制項
一、引言
Table 控制項可以用給定的靜態內容在設計時產生表, 但Table 控制項的威力通常在用動態內容以編程方式產生表時才會體現出來。Table 控制項允許產生HTML 表並以直接方式指定其屬性。Table 類主要由控制項開發人員使用。
所有的Web 控制項都有兩個基本屬性, 第一個屬性是runat ="server", 它告訴ASP.NET 在伺服器上處理控制項, 並為控制項執行所有的ASP.NET 功能, 包括狀態的建立。第二個屬性是ID, 指明該控制項的唯一標識代號, 以便在代碼中操縱該控制項。
Table 控制項主要由3 個組件組成:Table、TableRow和TableCell。
二、動態建立表
動態地建立一個表一般包含三個步驟:
( 1) 在.aspx 檔案中, 在<body></body>裡用一個asp 標籤建立Table1 控制項, Table1 就是一個對象。
<body>
<form id="Form1" method="post" runat="server">
<asp:Table id="Table1" runat="server"> </asp:Table>
</body>
Table 的具體產生可在<script></script>中通過函數寫在.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 列內容
}
}
上述建立的是一個表格的表體的結構, 其內容根據具體需要可從資料庫中獲得。
三、表格標題列的建立與儲存格合并
實際上, 表格標題列是按行構成的。如下面的樣本表格中"院系"、"專業"、"班級"、"招生"和"備忘"是第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 = "女生";
}
四、表體儲存格合并
由於表體中資料具有動態性的特點, 其縱向合并方法, 一般是逐行判斷要合并的儲存格裡的值是否和上一行同列的相同,要是相同的話就合并, 不同的話就接著判斷。
該方法的核心代碼如下:
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;
}
五、調用
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 列
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
