在 ASP.NET 中,GridView合并列标题

分享于 

5分钟阅读

Web开发

  繁體

GridView合并标题的屏幕截图:

介绍

合并ASP.NET GridView控件的标题。

在这个例子中,我使用CSS给GridView着色,以下是本例中使用的CSS的定义:



body {


 font-family: 'Segoe UI', Helvetica, Arial;


 font-size: 10pt;


}


table {


 border-collapse: collapse;


}


td {


 padding: 5px;


 border: 1px solid black;


 text-align: center;


}


.Day {


 background-color: #9b87ff;


 color: white;


 border: 1px solid black;


 padding: 5px;


}


.Car {


 background-color: #ffb4f7;


 color: #a30095;


 border: 1px solid black;


 padding: 5px;


}


.Bus {


 background-color: yellow;


 color: #ff6a00;


 border: 1px solid black;


 padding: 5px;


}


.Taxi {


 background-color: #b6ff00;


 color: #5a8a00;


 border: 1px solid black;


 padding: 5px;


}


tr:nth-child(odd) {


 background-color: #fffbb7;


}


tr:nth-child(even) {


 background-color: #dddddd;


} 




像往常一样将GridView添加到WebForm:



 <%@PageLanguage="C#"AutoEventWireup="true"



CodeBehind="WebForm1.aspx.cs"Inherits="WebApplication1.WebForm1"



ViewStateMode="Disabled"EnableViewState="false"%>



<!DOCTYPEhtml>


<htmlxmlns="http://www.w3.org/1999/xhtml">


<headrunat="server">


 <title></title>


</head>


<body>


 <formid="form1"runat="server">


 <div>


 <asp:GridViewID="GridView1"runat="server"></asp:GridView>


 </div>


 </form>


</body>


</html> 




代码隐藏,在Page_Load块,像通常一样将DataTable绑定到GridView:



protected void Page_Load(object sender, EventArgs e)


{


 GridView1.RowCreated += GridView1_RowCreated;



 DataTable dt = new DataTable();



 for (int i = 0; i < 9; i++)


 {


 dt.Columns.Add("dt" + (i + 1));


 }



 for (int i = 0; i < 10; i++)


 dt.Rows.Add(1, 2, 3, 4, 5, 6, 7, 8, 9);



 GridView1.DataSource = dt;


 GridView1.DataBind();


} 




在创建标题行时,我们在这里手动定义合并标题:



void GridView1_RowCreated(object sender, GridViewRowEventArgs e)


{


 if (e.Row.RowType == DataControlRowType.Header)


 {


 e.Row.Visible = false;



 AddHeaderRow1();


 AddHeaderRow2();


 }


} 




第一行包含跨3列的标题单元格,同时,我们在这里分配CSS类定义:



void AddHeaderRow1()


{


 GridViewRow gr = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);



 TableHeaderCell thc1 = new TableHeaderCell();


 TableHeaderCell thc2 = new TableHeaderCell();


 TableHeaderCell thc3 = new TableHeaderCell();



 thc1.Text = "Day 1";


 thc2.Text = "Day 2";


 thc3.Text = "Day 3";



 thc1.ColumnSpan = 3;


 thc2.ColumnSpan = 3;


 thc3.ColumnSpan = 3;



 // Assign CSS


 thc1.CssClass = "Day";


 thc2.CssClass = "Day";


 thc3.CssClass = "Day";



 gr.Cells.AddRange(new TableCell[] { thc1, thc2, thc3 });



 GridView1.Controls[0].Controls.AddAt(0, gr);


}




接下来,第二个标题行:



void AddHeaderRow2()


{


 GridViewRow gr = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);



 TableHeaderCell thc1 = new TableHeaderCell();


 TableHeaderCell thc2 = new TableHeaderCell();


 TableHeaderCell thc3 = new TableHeaderCell();


 TableHeaderCell thc4 = new TableHeaderCell();


 TableHeaderCell thc5 = new TableHeaderCell();


 TableHeaderCell thc6 = new TableHeaderCell();


 TableHeaderCell thc7 = new TableHeaderCell();


 TableHeaderCell thc8 = new TableHeaderCell();


 TableHeaderCell thc9 = new TableHeaderCell();



 thc1.Text = "Car";


 thc2.Text = "Bus";


 thc3.Text = "Taxi";


 thc4.Text = "Car";


 thc5.Text = "Bus";


 thc6.Text = "Taxi";


 thc7.Text = "Car";


 thc8.Text = "Bus";


 thc9.Text = "Taxi";



 // Assign CSS


 thc1.CssClass = "Car";


 thc2.CssClass = "Bus";


 thc3.CssClass = "Taxi";


 thc4.CssClass = "Car";


 thc5.CssClass = "Bus";


 thc6.CssClass = "Taxi";


 thc7.CssClass = "Car";


 thc8.CssClass = "Bus";


 thc9.CssClass = "Taxi";



 gr.Cells.AddRange(new TableCell[] { thc1, thc2, thc3, thc4, thc5, thc6, thc7, thc8, thc9 });



 GridView1.Controls[0].Controls.AddAt(1, gr);


} 





COL  asp  asp-net  GRID  Gridview  HEAD