首页 > 代码库 > ASP.NET—014：Gridview复合表头

ASP.NET—014：Gridview复合表头

2024-07-19 07:09:01   228人阅读

继续看一个简单的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=http://www.mamicode.com/‘‘ />>虽然显示时，前台设置的表头最终没有显示，不过还是要写的，因为免得自己记不清了，再有列项还需要绑定数据的。
需要给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
ASP.NET—014：Gridview复合表头


联系
我们