ASP.NET—014：Gridview复合表头

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


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

:gridview autogeneratecolumns="false" cellpadding="4" cellspacing="1" enableviewstate="false" forecolor="#333333" gridlines="horizontal" id="dgpersons" onrowcreated="dgpersons_rowcreated" pagechange="textbox" runat="server" shownorecordtip="true" sortmode="total" width="60%"> <%#container.dataitemindex +1%> 序号 <%#eval(p_name)%> 姓名 <%#eval(p_age)%> 年龄 <%#eval(p_sex)%> 性别 <%#eval(p_industry)%> 行业 <%#eval(p_job)%> 职业 <%#eval(p_experience)%> 经验

虽然显示时，前台设置的表头最终没有显示，不过还是要写的，因为免得自己记不清了，再有列项还需要绑定数据的。
需要给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 = 工作信息;


                    //再添加一个表头
                    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 = 经验;


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


                    break;
            }
        }

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