ASP.NET—014:Gridview复合表头

继续看一个简单的ASP.NET应用。
Gridview相信大家使用的比较多了,一般对多行数据进行展示和操作都会用到这个控件。而对于表头,也是很重要的一部分,它负责对数据进行分门别类的。而对于复合表头该如何展示呢?这个也挺简单的。
显示复合表头,一般可以在后台通过代码实现。对于表头是由多个Header控件组成的,一般默认的一个Header显示一列。而对于复合表头就是将Header进行设置,让它占用多列或者多行。或者增加很多个Header,然后每个Header分别占用多列或者多行就可以了。
来看一个复合的表头。

如果只显示一个表头的话是:序号 姓名 年龄 性别 行业 职业 经验,
现在又新增个人基本信息和工作信息,其实新增的这个表头是两个Header控件,它们分别占用3列,所以就达到了这样复合表头的效果。来看代码:
前台代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body id="Body1" runat="server">
     <form id="Form1" runat="server">

      <asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"
       GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
       CellSpacing="1" Width="60%" ShowNoRecordTip="True" OnRowCreated="DgPersons_RowCreated">
     <Columns>

       <asp:TemplateField>
       <ItemTemplate>
         <%#Container.DataItemIndex +1%>
         <input id="hideID" type="hidden" runat="server" value=‘<%#Eval("p_id")%>‘ />
       </ItemTemplate>
       <HeaderTemplate>
           <span>序号</span>
       </HeaderTemplate>
       </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_name")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>姓名</span>
       </HeaderTemplate>
       </asp:TemplateField>

        <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_age")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>年龄</span>
       </HeaderTemplate>
       </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_sex")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>性别</span>
       </HeaderTemplate>
       </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_industry")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>行业</span>
       </HeaderTemplate>
       </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_job")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>职业</span>
       </HeaderTemplate>
       </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_experience")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>经验</span>
       </HeaderTemplate>
       </asp:TemplateField>

     </Columns>
     <FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <RowStyle HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
    </form>
</body>
<script type="text/javascript" src="../Scripts/Ajax.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

<script language="javascript" type="text/javascript">
    var dgPersonsID = "<%= dgPersons.ClientID %>";

</script>
</html>

虽然显示时,前台设置的表头最终没有显示,不过还是要写的,因为免得自己记不清了,再有列项还需要绑定数据的。
需要给gridview加OnRowCreated事件。
后台代码:

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = InitData();

                this.dgPersons.DataSource = dt;

                this.dgPersons.DataBind();
            }
        }

        private DataTable InitData()
        {
            DataTable PersonCollect = new DataTable();

            PersonCollect = new DataTable();

            PersonCollect.Columns.Add("p_id");

            PersonCollect.Columns.Add("p_name");

            PersonCollect.Columns.Add("p_age");

            PersonCollect.Columns.Add("p_sex");

            PersonCollect.Columns.Add("p_industry");

            PersonCollect.Columns.Add("p_job");

            PersonCollect.Columns.Add("p_experience");

            if (PersonCollect.Rows.Count < 1)
            {
                for (int i = 0; i < 10; i++)
                {
                    DataRow nrow = PersonCollect.NewRow();

                    nrow["p_id"] = System.Guid.NewGuid().ToString();

                    nrow["p_name"] = "西北白杨树";

                    nrow["p_age"] = 27;

                    nrow["p_sex"] = "男";

                    nrow["p_industry"] = "软件";

                    nrow["p_job"] = "高级工程师";

                    nrow["p_experience"] = "若干年";

                    PersonCollect.Rows.Add(nrow);
                }
            }

            return PersonCollect;
        }

        protected void DgPersons_RowCreated(object sender, GridViewRowEventArgs e)
        {
            switch (e.Row.RowType)
            {
                case DataControlRowType.Header://行是标题行
                    TableCellCollection personHeader = e.Row.Cells;//标题行的单元格集合
                    personHeader.Clear();//清空

                    //添加一个表头 比如以及表头有三列 那么序号就是 0 1 2
                    personHeader.Add(new TableHeaderCell());
                    personHeader[0].Attributes.Add("rowspan", "2"); //跨2行
                    personHeader[0].Attributes.Add("colspan", "1"); //跨1列
                    personHeader[0].Attributes.Add("bgcolor", "DarkGreen");
                    personHeader[0].Text = "序号";

                    personHeader.Add(new TableHeaderCell());
                    personHeader[1].Attributes.Add("colspan", "3"); //跨3列
                    personHeader[1].Attributes.Add("bgcolor", "DarkYellow");
                    personHeader[1].Text = "个人基本信息";

                    personHeader.Add(new TableHeaderCell());
                    personHeader[2].Attributes.Add("colspan", "3"); //跨3列
                    personHeader[2].Attributes.Add("bgcolor", "DarkBlue");
                    personHeader[2].Text = "工作信息</th></tr><tr>";

                    //再添加一个表头
                    personHeader.Add(new TableHeaderCell());
                    personHeader[3].Attributes.Add("bgcolor", "Khaki");
                    personHeader[3].Text = "姓名";
                    personHeader.Add(new TableHeaderCell());
                    personHeader[4].Attributes.Add("bgcolor", "Khaki");
                    personHeader[4].Text = "年龄";
                    personHeader.Add(new TableHeaderCell());
                    personHeader[5].Attributes.Add("bgcolor", "Khaki");
                    personHeader[5].Text = "性别";
                    personHeader.Add(new TableHeaderCell());
                    personHeader[6].Attributes.Add("bgcolor", "Khaki");
                    personHeader[6].Text = "行业";
                    personHeader.Add(new TableHeaderCell());
                    personHeader[7].Attributes.Add("bgcolor", "Khaki");
                    personHeader[7].Text = "职业";
                    personHeader.Add(new TableHeaderCell());
                    personHeader[8].Attributes.Add("bgcolor", "Khaki");
                    personHeader[8].Text = "经验";

                    //还可以继续添加
                    //记住不论多少行表头,每个列的序号是一次递增的,而且需要换行 —</th></tr><tr>

                    break;
            }
        }

前面几个方法是为了加载数据的,主要的方法是:OnRowCreated事件的DgPersons_RowCreated。
要记住,不管增加多少Header它的序号是递增的,如果表头有多行,那么需要在一行结束的那个Head后增加换行标志。然后才能显示多行表头的效果。
加载了数据的多行复合表头的效果:

是不是特别简单...
代码下载:http://download.csdn.net/detail/yysyangyangyangshan/7812499

时间: 2024-10-13 22:31:08

ASP.NET—014:Gridview复合表头的相关文章

Gridview 复合表头

效果图: WEB页: <asp:GridView CssClass="grid" ID="grv" AutoGenerateColumns="False" runat="server"            EnableModelValidation="True" OnRowDataBound="grv_RowDataBound" Width="98%"    

VB.NET中自定义GridView的多行复合表头

我们都知道单行表头的合并是很好实现的,只需室友横跨列的ColumnSpan属性就可以实现, 但是在开发中,经常遇到表格的多行复合表头设计的问题,怎么扩展GridView控件以实现多行表头呢? ­要点:先定义第一行各占多少行,多少列,再追加第二行,以此类推 主体思路是这样的,GridView在ASP.NET中最终是转化为html的表格格式来显示的,所以我们要在其中做点文章, 看下面这段代码: 1 ''' <summary> 2 ''' 画面レイアウトより.GridViewのヘッダを設定 3 ''

Asp.net中GridView使用详解(引)

GridView无代码分页排序GridView选中,编辑,取消,删除GridView正反双向排序GridView和下拉菜单DropDownList结合GridView和CheckBox结合鼠标移到GridView某一行时改变该行的背景色方法一鼠标移到GridView某一行时改变该行的背景色方法二GridView实现删除时弹出确认对话框GridView实现自动编号GridView实现自定义时间货币等字符串格式GridView实现用“...”代替超长字符串GridView一般换行与强制换行GridV

devexpress实现多行表头(复合表头),附源代码

在许多项目中都会涉及到复合表头(多行表头),这里给大家分享一个devexpress实现多重表头的案例. 1.第一步将表格类型由默认的gridview变为bandedgridview,如图所示: 2.第二步添加数据列,与gridview添加数据列相同,设置好绑定字段及其他属性,如图: 3.设计多重表头,如图所示,最上面的表头为Band,可以添加,然后再按自己的要求摆放. 4.拖放完后大致的效果图如下: 5.数据绑定与gridview数据绑定相同,如下: DataTable dt = new Dat

Asp.net中GridView使用详解(引)【转】

Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckBox结合 鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView某一行时改变该行的背景色方法二 GridView实现删除时弹出确认对话框 GridView实现自动编号 GridView实现自定义时间货币等字符串格式 GridView实现用

Asp.net中GridView使用详解(很全,很经典)

http://blog.csdn.net/hello_world_wusu/article/details/4052844 Asp.net中GridView使用详解 效果图参考:http://hi.baidu.com/hello%5Fworld%5Fws/album/asp%2Enet中以gv开头的图片 l         GridView无代码分页排序 l         GridView选中,编辑,取消,删除 l         GridView正反双向排序 l         GridVi

silverlight RadGridView 复合表头 多表头 导出excel

ListHeaderShow.Clear(); ListHeaderShow.Add("区县"); ListHeaderShow.Add("企业名称"); ListHeaderShow.Add("监测点名称"); ListHeaderShow.Add("监测时间"); Util.Export<T_DATA_DATACOMMON> Exportxls = new Util.Export<T_DATA_DATAC

复合表头的RadGridView导出excel

public class Export<T> where T : new() { /// <summary> /// gridview导出excel /// </summary> /// <param name="Ttype">行对应的对象 如T_data_datacommon</param> /// <param name="Tsource">gridview的数据源</param>

ASP.NET 如何固定表格表头(fixed header)

[摘要]本文介绍ASP.NET 如何固定表格表头(fixed header),并提供详细的示例代码供参考. 你在HTML中渲染一张表格(可能是GridView或者Repeater),如果表格的行数太多,你就得向下拖东滚动条,但你一旦向下拖动滚动条,表头的信息就不见了.具体见下图. 向下拖动滚动条后,表头信息消失: 在本文中,我向大家讲解如何固定住表头.网上可以搜索到很多种方法来实现这个功能,但这些方法基本的原理都是一样的.就是利用div,将表头的信息复制到表身之上的一个div中. 1 <div>