欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET—014:Gridview复合表头

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

如果只显示一个表头的话是:序号 姓名 年龄 性别 行业 职业 经验,
现在又新增个人基本信息和工作信息,其实新增的这个表头是两个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后增加换行标志。然后才能显示多行表头的效果。
加载了数据的多行复合表头的效果:
ASP.NET—014:Gridview复合表头