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是没有,也懒得重新写,只是复制一些代码。

展开阅读全文

没有更多推荐了,返回首页