Repeater 创建复杂表头的表格

快来打我* 2022-08-25 12:51 121阅读 0赞

GridView的功能虽然强大，但在创建复杂表头报表时却显得逊色许多。此时我们应该想起另外一个控件：Repeater。下面是Repeater的结构：

< asp:Repeater  ID ="Repeater1"  runat ="server" >   
     < HeaderTemplate >   
     </ HeaderTemplate >   
     < ItemTemplate >   
     </ ItemTemplate >   
     < AlternatingItemTemplate >   
     </ AlternatingItemTemplate >   
     < FooterTemplate >   
     </ FooterTemplate >   
 </ asp:Repeater >

顾名思义，HeaderTemplate为表头模板，ItemTemplate为可重复的项，AlternatingItemTemplate为可重复交替项，FooterTemplate为注脚部部分。  
下面给出示例：  
![Repeater.jpg][]  
1. 前台代码：

< asp:Repeater  ID ="Repeater1"  runat ="server" >   
     < HeaderTemplate >   
         < table  border ="1"  align ="center"  width ="100%"  bordercolorlight ="\#a9a9a9"  bordercolordark ="\#ffffff"   
            cellspacing ="0"  cellpadding ="1"  bordercolor ="\#a9a9a9"  style ="text-align: center;" >   
             < tr  bgcolor ="\#B5DBFF" >   
                 < td  rowspan ="2"  style ="width: 100px" >   
                    波段 </ td >   
                 < td  rowspan ="2"  style ="width: 100px" >   
                    时段 </ td >   
                 < td  colspan ="3"  style ="height: 17px;" >   
                    第一部分 </ td >   
                 < td  colspan ="3"  style ="height: 17px;" >   
                    第二部分 </ td >   
                 < td  rowspan ="2"  style ="width: 100px" >   
                    合计 </ td >   
             </ tr >   
             < tr  bgcolor ="\#B5DBFF" >   
                 < td  style ="width: 100px; height: 17px;" >   
                    一 </ td >   
                 < td  style ="width: 100px; height: 17px;" >   
                    二 </ td >   
                 < td  style ="width: 100px; height: 17px;" >   
                    三 </ td >   
                 < td  style ="width: 100px; height: 17px;" >   
                    四 </ td >   
                 < td  style ="width: 100px; height: 17px;" >   
                    五 </ td >   
                 < td  style ="width: 100px; height: 17px;" >   
                    六 </ td >   
             </ tr >   
     </ HeaderTemplate >   
     < ItemTemplate >   
         < tr >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " ChannelID " )  %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Time " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Monday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Tuesday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Wednesday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Thursday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Friday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Saturday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Sunday " ) %>   
             </ td >   
         </ tr >   
     </ ItemTemplate >   
     < AlternatingItemTemplate >   
         < tr  style ="background-color: WhiteSmoke;" >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " ChannelID " )  %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Time " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Monday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Tuesday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Wednesday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Thursday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Friday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Saturday " ) %>   
             </ td >   
             < td  style ="width: 100px" >   
                 <% \#  Eval ( " Sunday " ) %>   
             </ td >   
         </ tr >   
     </ AlternatingItemTemplate >   
     < FooterTemplate >   
         </ table >   
     </ FooterTemplate >   
 </ asp:Repeater >   
 < cc1:WebPager  ID ="WebPager1"  runat ="server"  PagerStyle ="NextPrev"  ControlToPaginate ="Repeater1"   
    ItemsPerPage ="24"  OnPageIndexChanged ="WebPager1\_PageIndexChanged"   />

2. 后台代码：

\#region  Page事件   
DataTest.BLL.GetData myBiz  =   new  DataTest.BLL.GetData();  
 protected   void  Page\_Load( object  sender, EventArgs e)  
\{  
     if  ( ! Page.IsPostBack)  
    \{  
        GetData();  
        BindGrid();  
    \}  
\}  
 \#endregion   
  
 \#region  Repeater   
  
 \#region  数据绑定   
 ///   <summary>   
 ///  获取数据  
 ///   </summary>   
 protected   void  GetData()  
\{  
     this .DataSource  =  myBiz.GetOrderDetails( " RM\_Clocks " ); ;  
\}  
  
 ///   <summary>   
 ///  GridView 数据绑定  
 ///   </summary>   
 private   void  BindGrid()  
\{  
    WebPager1.DataSource  =   this .DataSource;  
    WebPager1.DataBind();  
\}  
 \#endregion   
  
 \#region  分页   
 protected   void  WebPager1\_PageIndexChanged( object  sender, wf.WebPager.PageChangedEventArgs e)  
\{  
    WebPager1.CurrentPageIndex  =  e.NewPageIndex;  
    WebPager1.DataSource  =   this .DataSource;  
    WebPager1.DataBind();  
\}  
 \#endregion   
  
 \#endregion

[Repeater.jpg]: /images/20220824/6bd17bcd2e9b49418897746c92ce4657.png