ASP.NET 2.0中GridView无限层复杂表头的实现

ASP.NET 2.0中GridView无限层复杂表头的实现

<script src="/Script/BeforeContent.js" type="text/javascript"></script><script src="http://a.alimama.cn/inf.js" type="text/javascript"></script>

实现方法就是给单元格填充我们想要的格式代码。
 

<% @ 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 " >

< script runat = " server " >
//  计算数据，完全可以从数据库取得
  ICollection CreateDataSource( )
   ... {
    System.Data.DataTable dt = new System.Data.DataTable();
    System.Data.DataRow dr;
    dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
    dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
    dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
    dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));

    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 >