ASP.NET GridView 复合表头(带自动分页设置)

ASP.NET GridView 复合表头(带自动分页设置)

由于项目的需求，需要一个复合表头。废话不多说先上效果图：

前台代码（SensorData.aspx）：

<asp:GridView ID="GvSensorData" runat="server" AllowPaging="true" PageSize="22" EnableViewState="false" CellPadding="4" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
CellSpacing="1" Width="100%" ShowNoRecordTip="True" OnRowCreated="gvSeneorData_RowCreated" OnPageIndexChanged="rblSensorType_SelectedIndexChanged" OnPageIndexChanging="GvSensorData_PageIndexChanging">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("section_course")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>断面里程</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("measure_time")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>量测时间</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("sensortemp")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>温度</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("sensor_top")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>拱顶传感器</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("sensor_waist")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>拱腰传感器</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("sensor_altitude")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>标高传感器</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("top_height")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>拱顶标高</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("total_sink")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>累计沉降</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("current_sink")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>本次沉降</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("internal")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>时间间隔</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("sink_velocity")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>下沉速度</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("total_constringency")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>累积收敛</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("current_constringency")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>本次收敛</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("time_internal")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>时间间隔</span>
</HeaderTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<span><%#Eval("constringency_velocity")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>收敛速度</span>
</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

后台代码（sensorData.aspx.cs）:

需要在GridView事件属性中添加事件处理：

呈现 GridView 控件之前，必须先为该控件中的每一行创建一个 GridViewRow 对象。在创建 GridView 控件中的每一行时，将引发 RowCreated 事件。这使您可以提供一个这样的事件处理方法，即每次发生此事件时就执行一个自定义例程（如在行中添加自定义内容）

protected void gvSeneorData_RowCreated(object sender, GridViewRowEventArgs e)
{
//判断创建的行是否为表头行
if (e.Row.RowType == DataControlRowType.Header)
{
//获取表头所在行的所有单元格
TableCellCollection tcHeader = e.Row.Cells;
//清除自动生成的表头
tcHeader.Clear();

//添加第一个单元格，设置为合并三行
tcHeader.Add(new TableHeaderCell());
//合并行数 --> 3
tcHeader[0].RowSpan = 3;
tcHeader[0].ColumnSpan = 1;
//指定文本内容
tcHeader[0].Text = "断面里程";

//添加第二个单元格，设置为合并三行
tcHeader.Add(new TableHeaderCell());
//合并行数 --> 3
tcHeader[1].RowSpan = 3;
tcHeader[1].ColumnSpan = 1;
//指定文本内容
tcHeader[1].Text = "量测时间";

//添加第三个单元格，
tcHeader.Add(new TableHeaderCell());
//合并行数 -- > 2
tcHeader[2].RowSpan = 2;
tcHeader[2].ColumnSpan = 1;
//指定文本内容
tcHeader[2].Text = "温度";

tcHeader.Add(new TableHeaderCell());
tcHeader[3].ColumnSpan = 3;
tcHeader[3].RowSpan = 1;
tcHeader[3].Text = "传感器状态";

tcHeader.Add(new TableHeaderCell());
tcHeader[4].ColumnSpan = 5;
tcHeader[4].RowSpan = 1;
tcHeader[4].Text = "拱顶下沉量测";

tcHeader.Add(new TableHeaderCell());
tcHeader[5].ColumnSpan = 4;
tcHeader[5].RowSpan = 1;
tcHeader[5].Text = "净空变化量测</th></tr><tr>";
//需要注意的点 在每行单元格结束时，添加</th></tr><tr>
//如果不注意不会得到你想要的效果。
tcHeader.Add(new TableHeaderCell());
tcHeader[6].ColumnSpan = 1;
tcHeader[6].RowSpan = 1;
tcHeader[6].Text = "拱顶传感器";

tcHeader.Add(new TableHeaderCell());
tcHeader[7].ColumnSpan = 1;
tcHeader[7].RowSpan = 1;
tcHeader[7].Text = "拱腰传感器";

tcHeader.Add(new TableHeaderCell());
tcHeader[8].ColumnSpan = 1;
tcHeader[8].RowSpan = 1;
tcHeader[8].Text = "标高传感器";

tcHeader.Add(new TableHeaderCell());
tcHeader[9].ColumnSpan = 1;
tcHeader[9].RowSpan = 1;
tcHeader[9].Text = "拱顶标高";

tcHeader.Add(new TableHeaderCell());
tcHeader[10].ColumnSpan = 1;
tcHeader[10].RowSpan = 1;
tcHeader[10].Text = "累计沉降";

tcHeader.Add(new TableHeaderCell());
tcHeader[11].ColumnSpan = 1;
tcHeader[11].RowSpan = 1;
tcHeader[11].Text = "本次沉降";

tcHeader.Add(new TableHeaderCell());
tcHeader[12].ColumnSpan = 1;
tcHeader[12].RowSpan = 1;
tcHeader[12].Text = "时间间隔";

tcHeader.Add(new TableHeaderCell());
tcHeader[13].ColumnSpan = 1;
tcHeader[13].RowSpan = 1;
tcHeader[13].Text = "下沉速度";

tcHeader.Add(new TableHeaderCell());
tcHeader[14].ColumnSpan = 1;
tcHeader[14].RowSpan = 1;
tcHeader[14].Text = "累计收敛";

tcHeader.Add(new TableHeaderCell());
tcHeader[15].ColumnSpan = 1;
tcHeader[15].Text = "本次收敛";

tcHeader.Add(new TableHeaderCell());
tcHeader[16].ColumnSpan = 1;
tcHeader[16].RowSpan = 1;
tcHeader[16].Text = "时间间隔";

tcHeader.Add(new TableHeaderCell());
tcHeader[17].ColumnSpan = 1;
tcHeader[17].RowSpan = 1;
tcHeader[17].Text = "收敛速度</th></tr><tr>";

tcHeader.Add(new TableHeaderCell());
tcHeader[18].ColumnSpan = 1;
tcHeader[18].RowSpan = 1;
tcHeader[18].Text = "℃";

tcHeader.Add(new TableHeaderCell());
tcHeader[19].ColumnSpan = 1;
tcHeader[19].RowSpan = 1;
tcHeader[19].Text = "--";

tcHeader.Add(new TableHeaderCell());
tcHeader[20].ColumnSpan = 1;
tcHeader[20].RowSpan = 1;
tcHeader[20].Text = "--";

tcHeader.Add(new TableHeaderCell());
tcHeader[21].ColumnSpan = 1;
tcHeader[21].RowSpan = 1;
tcHeader[21].Text = "--";

tcHeader.Add(new TableHeaderCell());
tcHeader[22].ColumnSpan = 1;
tcHeader[22].RowSpan = 1;
tcHeader[22].Text = "mm";

tcHeader.Add(new TableHeaderCell());
tcHeader[23].ColumnSpan = 1;
tcHeader[23].RowSpan = 1;
tcHeader[23].Text = "mm";

tcHeader.Add(new TableHeaderCell());
tcHeader[24].ColumnSpan = 1;
tcHeader[24].RowSpan = 1;
tcHeader[24].Text = "mm";

tcHeader.Add(new TableHeaderCell());
tcHeader[25].ColumnSpan = 1;
tcHeader[25].RowSpan = 1;
tcHeader[25].Text = "d";

tcHeader.Add(new TableHeaderCell());
tcHeader[26].ColumnSpan = 1;
tcHeader[26].RowSpan = 1;
tcHeader[26].Text = "mm/d";

tcHeader.Add(new TableHeaderCell());
tcHeader[27].ColumnSpan = 1;
tcHeader[27].RowSpan = 1;
tcHeader[27].Text = "mm";

tcHeader.Add(new TableHeaderCell());
tcHeader[28].ColumnSpan = 1;
tcHeader[28].RowSpan = 1;
tcHeader[28].Text = "mm";

tcHeader.Add(new TableHeaderCell());
tcHeader[29].ColumnSpan = 1;
tcHeader[29].RowSpan = 1;
tcHeader[29].Text = "d";

tcHeader.Add(new TableHeaderCell());
tcHeader[30].ColumnSpan = 1;
tcHeader[30].RowSpan = 1;
tcHeader[30].Text = "mm/d</th></tr><tr>";
foreach (TableHeaderCell th in tcHeader) {
th.BackColor = Color.FromArgb(85, 207, 246);
}
}

需要注意的点:

(1)：需要为GridView添加AutoGenerateColumns属性，（如果不设置该值，可以自己看一下效果，数据源的效果会自动创建字段）下面为官方文档给出的解释：

获取或设置一个值，该值指示是否为数据源中的每个字段自动创建绑定的字段。

（2）：就是为每行表头单元格的结束的时候加上

不加的话自己也可以体验一下。

（3）：自动分页的实现就比较简单，为GridView设置AllowPaging 属性为true；获取或设置一个值，该值指示是否启用分页功能。

protected void GvSensorData_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GvSensorData.PageIndex = e.NewPageIndex;
initSensorData();//重新绑定
}

Demo是没有，也懒得重新写，只是复制一些代码。