当前位置： 移动技术网 > IT编程>开发语言>.net > ASP.NET—014：Gridview复合表头

ASP.NET—014：Gridview复合表头

2019年05月10日  | 移动技术网IT编程  | 我要评论

赛尔号奈迪罗尼,网赚联盟,昌平线线路图

继续看一个简单的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后增加换行标志。然后才能显示多行表头的效果。

加载了数据的多行复合表头的效果：

/



 						

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网