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

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

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

GridView1.gif (6.86 K)

2008-2-5 11:51:05

<% @ 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 " , " background9999FF;colorFFFFFF;font-size:14px " );
    }
    else
    {
      e.Row.Attributes.Add( " style " , " backgroundFFF " );
    }
  }
</ 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 >