asp.net GridView多行表頭的實現
阿新 • • 發佈：2019-01-28
方法一：多行表頭合併效果圖
| 測試多行合併表頭 | ||||||
|---|---|---|---|---|---|---|
| 表頭 | 表頭1 | 表頭2 | 表頭3 | |||
| 表頭1-1 | 表頭2-1 | 表頭2-2 | 表頭3-1 | 表頭3-2 | 表頭3-3 | |
1 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
2 {
3 //判斷建立的行是否為表頭行
4 if (e.Row.RowType == DataControlRowType.Header)
5 {
6 //獲取表頭所在行的所有單元格
7 TableCellCollection tcHeader = e.Row.Cells;
8 //清除自動生成的表頭
9 tcHeader.Clear();
10
11 //新新增的第一個表頭單元格, 設定為合併7個列, 從而形成一行.
12 tcHeader.Add(new TableHeaderCell());
13 tcHeader[0].ColumnSpan = 7;
14 tcHeader[0].Text = "測試多行合併表頭</th></tr><tr>";
15 //</th>表示當前單元格結束, </tr>表示本行結束, <tr>另起新一行 關鍵點
16
17 //新增第二個表頭單元格, 設定為合併兩行.
18 tcHeader.Add(new TableHeaderCell());
19 tcHeader[1].RowSpan = 2;
20 tcHeader[1].Text = "表頭";
21
22 tcHeader.Add(new TableHeaderCell());
23 tcHeader[2].Text = "表頭1";
24
25 tcHeader.Add(new TableHeaderCell());
26 tcHeader[3].ColumnSpan = 2;
27 tcHeader[3].Text = "表頭2";
28
29 tcHeader.Add(new TableHeaderCell());
30 tcHeader[4].ColumnSpan = 3;
31 tcHeader[4].Text = "表頭3</th></tr><tr>";
32
33 //第二行的所有的單元格新增完成, 換行</th></tr><tr>
34
35 //新增第三行所有的單元格
36 tcHeader.Add(new TableHeaderCell());
37 tcHeader[5].Text = "表頭1-1";
38
39 tcHeader.Add(new TableHeaderCell());
40 tcHeader[6].Text = "表頭2-1";
41
42 tcHeader.Add(new TableHeaderCell());
43 tcHeader[7].Text = "表頭2-2";
44
45 tcHeader.Add(new TableHeaderCell());
46 tcHeader[8].Text = "表頭3-1";
47
48 tcHeader.Add(new TableHeaderCell());
49 tcHeader[9].Text = "表頭3-2";
50
51 tcHeader.Add(new TableHeaderCell());
52 tcHeader[10].Text = "表頭3-3</th></tr><tr>";
53 }
54
55 }方法二： 實現方法就是給單元格填充我們想要的格式程式碼。 protected void GridView1_RowCreated( object sender, GridViewRowEventArgs e ) { if (e.Row.RowType == DataControlRowType.Header) { //建立一個GridViewRow，相當於表格的 TR 一行 GridViewRow rowHeader = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal); string HeaderBackColor = "#EDEDED"; rowHeader.BackColor = System.Drawing.ColorTranslator.FromHtml(HeaderBackColor); //實現確定要顯示的表頭樣式，也可以通過計算生成 // <tr> // <td rowspan='2'>關鍵單元格</td> // <td colspan='2'>表頭文字</td> // <td colspan='2'>表頭文字</td> // <td>表頭文字</td> // </tr> // <tr bgcolor='#FFF'> // <td colspan='2'>表頭文字</td> // <td rowspan='2'>表頭文字</td> // <td colspan='2'>表頭文字</td> // </tr> // <tr bgcolor='#FFF'> // <td>表頭文字</td> // <td>表頭文字</td> // <td>表頭文字</td> // <td>表頭文字</td> // <td>表頭文字</td>"; // </tr> // 上面的樣式可以設定斜線 Literal newCells = new Literal(); newCells.Text = @"表頭文字1</th> <th colspan='2'>表頭文字2</th> <th colspan='2'>表頭文字3</th> <th>表頭文字4</th> </tr> <tr bgcolor='" + HeaderBackColor + "'>"; newCells.Text += @" <th colspan='2'>表頭文字5</th> <th rowspan='2'>表頭文字6</th> <th colspan='2'>表頭文字7</th> </tr> <tr bgcolor='" + HeaderBackColor + "'>"; newCells.Text += @" <th>表頭文字8</th> <th>表頭文字9</th> <th>表頭文字10</th> <th>表頭文字11</th> <th>表頭文字12"; TableCellCollection cells = e.Row.Cells; TableHeaderCell headerCell = new TableHeaderCell(); //下面的屬性設定與 <td rowspan='2'>關鍵單元格</td> 要一致 headerCell.RowSpan = 2; headerCell.Controls.Add(newCells); rowHeader.Cells.Add(headerCell); rowHeader.Cells.Add(headerCell); rowHeader.Visible = true; //新增到 GridView1 GridView1.Controls[0].Controls.AddAt(0, rowHeader); } }