ASP.NET 2.0中GridView無限層複雜表頭的實現(datagrid大同小易，repeater就不必這樣，直接有頭模版布局就可以)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

for (int i = 0; i < 8; i++)
{
   System.Random rd = new System.Random(Environment.TickCount * i); ;
   dr = dt.NewRow();
   dr[0] = "班級" + i.ToString();
   dr[1] = "學生" + i.ToString();
   dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
   dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
   dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
   dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
   dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
  }

  protected void Page_Load( object sender, EventArgs e )
  {
if (!IsPostBack)
{
   GridView1.BorderColor = System.Drawing.Color.DarkOrange;
   GridView1.DataSource = CreateDataSource();
   GridView1.DataBind();
}
  }

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);
}
  }

  protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e )
  {
if (e.Row.RowType == DataControlRowType.Header)
{
   e.Row.Attributes.Add("style", "background:#9999FF;color:#FFFFFF;font-size:14px");
}
else
{
   e.Row.Attributes.Add("style", "background:#FFF");
}
  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>為 GridView 添加多層表頭</title>
</head>
<body>
  <form id="Form1" runat="server">
<asp:GridView ID="GridView1" runat="server" CellSpacing="1" CellPadding="3" Font-Size="12px"
   Width="600px" BackColor="#000000" BorderWidth="0" OnRowDataBound="GridView1_RowDataBound"
   OnRowCreated="GridView1_RowCreated">
</asp:GridView>
  </form>
</body>
</html>
VB.NET

<%@ Page Language="VB" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   dr = dt.NewRow
   dr(0) = "班級" + i.ToString
   dr(1) = "學生" + i.ToString
   dr(2) = System.Math.Round(rd.NextDouble * 100, 2)
   dr(3) = System.Math.Round(rd.NextDouble * 100, 2)
   dr(4) = System.Math.Round(rd.NextDouble * 100, 2)
   dr(5) = System.Math.Round(rd.NextDouble * 100, 2)
   dt.Rows.Add(dr)
   System.Math.Min(System.Threading.Interlocked.Increment(i), i - 1)
End While
Dim dv As System.Data.DataView = New System.Data.DataView(dt)
Return dv
  End Function

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not IsPostBack Then
   GridView1.BorderColor = System.Drawing.Color.DarkOrange
   GridView1.DataSource = CreateDataSource()
   GridView1.DataBind()
End If
  End Sub

  Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.Header Then
   Dim rowHeader As GridViewRow = New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)
   Dim HeaderBackColor As String = "#EDEDED"
   rowHeader.BackColor = System.Drawing.ColorTranslator.FromHtml(HeaderBackColor)
   Dim newCells As Literal = New Literal
   newCells.Text = "表頭文字1</th>" + _
                  " <th colspan='2'>表頭文字2</th>" + _
                  " <th colspan='2'>表頭文字3</th>" + _
                  " <th>表頭文字4</th>" + _
                  " </tr>" + _
                  " <tr bgcolor='" + HeaderBackColor + "'>" + _
                  "  <th colspan='2'>表頭文字5</th>" + _
                  "  <th rowspan='2'>表頭文字6</th>" + _
                  " <th colspan='2'>表頭文字7</th>" + _
                  " </tr>" + _
                  " <tr bgcolor='" + HeaderBackColor + "'>" + _
                  "  <th>表頭文字8</th>" + _
                  "  <th>表頭文字9</th>" + _
                  "  <th>表頭文字10</th>" + _
                  "  <th>表頭文字11</th>" + _
                  "  <th>表頭文字12"
   Dim cells As TableCellCollection = e.Row.Cells
   Dim headerCell As TableHeaderCell = New TableHeaderCell
   headerCell.RowSpan = 2
   headerCell.Controls.Add(newCells)
   rowHeader.Cells.Add(headerCell)
   rowHeader.Cells.Add(headerCell)
   rowHeader.Visible = True
   GridView1.Controls(0).Controls.AddAt(0, rowHeader)
End If
  End Sub

  Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.Header Then
   e.Row.Attributes.Add("style", "background:#9999FF;color:#FFFFFF;font-size:14px")
Else
   e.Row.Attributes.Add("style", "background:#FFF")
End If
  End Sub

</script>

2.在datagrid 資料繫結事件代碼實現

TableCellCollection tc = e.Item.Cells;
        if (e.Item.ItemType == ListItemType.Header)
        {
            //tc[0] = new TableHeaderCell();
            tc[0].RowSpan = 2;
            tc[7].Style.Add("border-left", "1px solid #000");
            tc.RemoveAt(e.Item.Cells.Count - 1);

            TableHeaderCell thc1 = new TableHeaderCell();
            thc1.Text = "New to Quidsi (first order contains:)";
            thc1.Style.Add("border-bottom", "solid 2px #000;");
            thc1.ColumnSpan = 6;
            tc.AddAt(1, thc1);
            TableHeaderCell thc2 = new TableHeaderCell();
            thc2.Text = "Existing Customer";
            thc2.Style.Add("border-bottom", "2px solid #000");
            thc2.Style.Add("border-left", "1px solid #000");
            thc2.ColumnSpan = 2;
            tc.AddAt(2, thc2);

            TableHeaderCell thc3 = new TableHeaderCell();
            thc3.Text = "Total</th></tr>";
            thc3.RowSpan = 2;
            tc.AddAt(3, thc3);
            //tc[5].Text = + tc[5].Text;
        }
        else
            tc[7].Style.Add("border-left", "1px solid #000");

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More