GridView多行表頭合并GridView多行表頭合并

GridView多行表頭合并

多行表頭合并, 網上很多執行個體, 這裡寫的很詳細, 力求讓每個人都能看懂.
實現原理:GridView在ASP.NET中最終轉為HMTL的表格顯示表頭。
在GridView建立行表頭行時: e.Row.RowType == DatacontrolRowType.Header
清除掉舊的表頭, 再重新拼接新的表頭.

TableHeaderCell thc = new TableHeaderCell();

thc.Text = "表頭";

對應產生的HTML為：<th>表頭</th>

多行表頭合并

測試多行合并表頭
表頭	表頭1	表頭2		表頭3
	表頭1-1	表頭2-1	表頭2-2	表頭3-1	表頭3-2	表頭3-3

 

 

 

 

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)    {        //判斷建立的行是否為表頭行        if (e.Row.RowType == DataControlRowType.Header)        {            //擷取表頭所在行的所有儲存格            TableCellCollection tcHeader = e.Row.Cells;            //清除自動產生的表頭            tcHeader.Clear();            //新添加的第一個表頭儲存格, 設定為合并7個列, 從而形成一行.            tcHeader.Add(new TableHeaderCell());            tcHeader[0].ColumnSpan = 7;            tcHeader[0].Text = "測試多行合并表頭</th></tr><tr>";            //</th>表示目前的儲存格結束, </tr>表示本行結束, <tr>另起新一行    關鍵點                        //添加第二個表頭儲存格, 設定為合并兩行.            tcHeader.Add(new TableHeaderCell());            tcHeader[1].RowSpan = 2;            tcHeader[1].Text = "表頭";            tcHeader.Add(new TableHeaderCell());            tcHeader[2].Text = "表頭1";            tcHeader.Add(new TableHeaderCell());            tcHeader[3].ColumnSpan = 2;            tcHeader[3].Text = "表頭2";            tcHeader.Add(new TableHeaderCell());            tcHeader[4].ColumnSpan = 3;            tcHeader[4].Text = "表頭3</th></tr><tr>";                        //第二行的所有的儲存格添加完成, 換行</th></tr><tr>            //添加第三行所有的儲存格              tcHeader.Add(new TableHeaderCell());            tcHeader[5].Text = "表頭1-1";            tcHeader.Add(new TableHeaderCell());            tcHeader[6].Text = "表頭2-1";            tcHeader.Add(new TableHeaderCell());            tcHeader[7].Text = "表頭2-2";            tcHeader.Add(new TableHeaderCell());            tcHeader[8].Text = "表頭3-1";            tcHeader.Add(new TableHeaderCell());            tcHeader[9].Text = "表頭3-2";            tcHeader.Add(new TableHeaderCell());            tcHeader[10].Text = "表頭3-3</th></tr><tr>";        }    }

 

多行表頭合并, 網上很多執行個體, 這裡寫的很詳細, 力求讓每個人都能看懂.
實現原理:GridView在ASP.NET中最終轉為HMTL的表格顯示表頭。
在GridView建立行表頭行時: e.Row.RowType == DatacontrolRowType.Header
清除掉舊的表頭, 再重新拼接新的表頭.

TableHeaderCell thc = new TableHeaderCell();

thc.Text = "表頭";

對應產生的HTML為：<th>表頭</th>

多行表頭合并

測試多行合并表頭
表頭	表頭1	表頭2		表頭3
	表頭1-1	表頭2-1	表頭2-2	表頭3-1	表頭3-2	表頭3-3

 

 

 

 

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)    {        //判斷建立的行是否為表頭行        if (e.Row.RowType == DataControlRowType.Header)        {            //擷取表頭所在行的所有儲存格            TableCellCollection tcHeader = e.Row.Cells;            //清除自動產生的表頭            tcHeader.Clear();            //新添加的第一個表頭儲存格, 設定為合并7個列, 從而形成一行.            tcHeader.Add(new TableHeaderCell());            tcHeader[0].ColumnSpan = 7;            tcHeader[0].Text = "測試多行合并表頭</th></tr><tr>";            //</th>表示目前的儲存格結束, </tr>表示本行結束, <tr>另起新一行    關鍵點                        //添加第二個表頭儲存格, 設定為合并兩行.            tcHeader.Add(new TableHeaderCell());            tcHeader[1].RowSpan = 2;            tcHeader[1].Text = "表頭";            tcHeader.Add(new TableHeaderCell());            tcHeader[2].Text = "表頭1";            tcHeader.Add(new TableHeaderCell());            tcHeader[3].ColumnSpan = 2;            tcHeader[3].Text = "表頭2";            tcHeader.Add(new TableHeaderCell());            tcHeader[4].ColumnSpan = 3;            tcHeader[4].Text = "表頭3</th></tr><tr>";                        //第二行的所有的儲存格添加完成, 換行</th></tr><tr>            //添加第三行所有的儲存格              tcHeader.Add(new TableHeaderCell());            tcHeader[5].Text = "表頭1-1";            tcHeader.Add(new TableHeaderCell());            tcHeader[6].Text = "表頭2-1";            tcHeader.Add(new TableHeaderCell());            tcHeader[7].Text = "表頭2-2";            tcHeader.Add(new TableHeaderCell());            tcHeader[8].Text = "表頭3-1";            tcHeader.Add(new TableHeaderCell());            tcHeader[9].Text = "表頭3-2";            tcHeader.Add(new TableHeaderCell());            tcHeader[10].Text = "表頭3-3</th></tr><tr>";        }    }