Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]

 

(一). 概述

        1. 实现GridView表头固定表体滚动效果

        2. 继承GridView的所有功能, 增加扩展功能, 表体滚动功能; 不需要另外加辅助滚动控件, 如<DIV>.

        3. 支持多行表头滚动, 此控件能够自动检测到使用者增加的表头的行数. 准确的实现表头滚动.

            有增加GridView多表头实现方案, 请看[多表头自定义控件]. 

实现原理:

    一般要实现GridView表头固定，表体滚动功能时，都是自己增加一个<DIV>控件，

然后将GridView嵌套在这个<DIV>控件里面；使用这个GridView控件就不用在页面中自己

增加个<DIV>控件了，因为它自动完成了增加<DIV>控件的功能，具有通用性.

(二). 运行如图

      1.  单行表头增加自动滚动效果

 

      2.  多行表头增加自动滚动效果

  

 

(三). 用法

   1. 将GridViewExpendHeader控件Dll添加引用到Web站点工程中

   2. 从工具箱拖动一个GridViewExpendHeader控件到设计器中

   3. 设置GridViewExpendHeader控件的属性.

                a.  设置属性窗口中新增的 "扩展" 类别中的两个属性,  这两个属性是指滚动区域的大小, 如下图所示:

                        

               b.  设置GridView本身的高度Height, 这个高度是指滚动区域内的GridView的实际高度, 这个高度数值设置

                     要大于ScrollHeight滚动条才能够呈现.  简单地说, 本自定义控件自动会实现一个GridView(自己)

                    的父控件<DIV>,  然后再把自己放在里面,  如果自己高度小于<DIV>高度了,  不用滚动就能够显示

                    全自己的数据, 滚动条就没有呈现的意义了.   这里讲得有点啰嗦.   .        

   4. F5运行即可

(四). 完整代码

    1. 主控件GridViewFixedMultiHeader类代码    

  1       ///   < summary >
  2       ///  Author: [ ChengKing(ZhengJian) ] 
  3       ///  Blog:   Http: // blog.csdn.net / ChengKing
  4       ///   Date :    2007 / 4 / 3
  5       ///   </ summary >     
  6       ///   < summary >
  7       ///  主控件类, 继承GridView的所有功能
  8       ///   </ summary >
  9      [ToolboxData( " <{0}:GridViewExpendHeader runat=server></{0}:GridViewExpendHeader> " )]
 10       public   class  GridViewFixedMultiHeader : GridView 
 11      {       
 12          [Description( " 当需要重新构造Header时触发此事件 " )]
 13           public   event  System.EventHandler RebuildHeader;
 14 
 15           private  System.Web.UI.WebControls.Panel pnlScroll  =   new  System.Web.UI.WebControls.Panel();
 16 
 17           #region  扩展
 18           ///   < summary >
 19           ///  设定滚动容器的宽度
 20           ///   </ summary >
 21          [Bindable( true )]
 22          [Category( " 扩展 " )]
 23          [DefaultValue( " 500px " )]
 24          [Localizable( true )]
 25          [TypeConverter( typeof (UnitConverter))]
 26           public  Unit ScrollWidth
 27          {
 28               get
 29              {
 30                   return  pnlScroll.Width;
 31              }
 32               set
 33              {
 34                  pnlScroll.Width  =  value;
 35              }
 36          }
 37 
 38           ///   < summary >
 39           ///  设定滚动容器的高度
 40           ///   </ summary >
 41          [Bindable( true )]
 42          [Category( " 扩展 " )]
 43          [DefaultValue( " 150px " )]
 44          [Localizable( true )]
 45          [TypeConverter( typeof (UnitConverter))]
 46           public  Unit ScrollHeight
 47          {
 48               get
 49              {
 50                   return  pnlScroll.Height;
 51              }
 52               set
 53              {
 54                  pnlScroll.Height  =  value;
 55              }
 56          }
 57          #endregion
 58 
 59           protected  override void OnPreRender(EventArgs e)
 60          {
 61              
 62              StringBuilder sb  =   new  StringBuilder();              
 63              sb.Append( "  function Tidy() " );
 64              sb.Append( "  { " );
 65              sb.Append( "      var gve = document.getElementById(/""+ this.UniqueID + " / " );  " );            
 66              sb.Append( "      if( gve.rows.length > 0 ) " );
 67              sb.Append( "      { " );
 68              sb.Append( "          var a1 = document.getElementById(/ " divHeaderContainer / " ); " );
 69              sb.Append( "          var table1 = document.createElement(/ " table / " ); " );
 70              sb.Append( "          var tbody1 = document.createElement(/ " tbody / " ); " );
 71              sb.Append( "          table1.style.cssText = / " table - layout:fixed;border - style: solid ;border - color:gray; border - width: 1px thin; / " ;    " );
 72               // sb.Append( "          table1.style.cssText = / " table - layout:fixed;color:#CCCCFF;background - color:# 003399 ;font - weight:bold; / " ; " );
 73              sb.Append( "          var i; " );
 74              sb.Append( "          var blnIfFind = false; " );
 75              sb.Append( "          for( i = gve.rows.length - 1; i >= 0; i-- ) " );
 76              sb.Append( "          { " );
 77              sb.Append( "              if( gve.rows[i].children(0).tagName.toUpperCase() != / " TH / "  && blnIfFind == false )   " );
 78              sb.Append( "              { " );
 79              sb.Append( "                  continue; " );
 80              sb.Append( "              } " );
 81              sb.Append( "              if( blnIfFind == false ) " );
 82              sb.Append( "              { " );
 83              sb.Append( "                  blnIfFind = true;  " );
 84              sb.Append( "              } " );
 85              sb.Append( "              if( tbody1.children.length == 0 ) " );
 86              sb.Append( "              { " );
 87              sb.Append( "                  var newRow = gve.rows[i].cloneNode(true);  " );
 88               // sb.Append( "                  newRow.style.cssText = 'border-style: solid ;border-color:gray; border-width: 1px thin'; " );            
 89              sb.Append( "                  tbody1.appendChild( newRow );  " );
 90              sb.Append( "              } " );
 91              sb.Append( "              else " );
 92              sb.Append( "              { " );
 93              sb.Append( "                  var newRow = gve.rows[i].cloneNode(true);    " );
 94               // sb.Append( "                  newRow.style.cssText = 'border-style: solid ;border-color:gray; border-width: 1px thin'; " );
 95              sb.Append( "                  tbody1.insertBefore( newRow , tbody1.firstChild ); " );
 96              sb.Append( "              } " );
 97              sb.Append( "          } " );
 98              sb.Append( "          table1.appendChild(tbody1); " );
 99              sb.Append( "          a1.appendChild(table1);  " );
100              sb.Append( "          for( i = 0; i < gve.rows.length -1; i++) " );
101              sb.Append( "          { " );
102              sb.Append( "              if( gve.rows[0].children(0).tagName.toUpperCase() != / " TH / "  ) " );
103              sb.Append( "              { " );
104              sb.Append( "                  gve.deleteRow(0);    " );
105              sb.Append( "                  continue; " );
106              sb.Append( "              } " );
107              sb.Append( "              gve.deleteRow(0);    " );
108              sb.Append( "              break;  " );
109              sb.Append( "          } " );
110              sb.Append( "      } " );
111              sb.Append( "  } " );
112 
113               if  (!Page.ClientScript.IsClientScriptBlockRegistered( " Tidy " ))
114              {
115                  Page.ClientScript.RegisterClientScriptBlock(this.GetType(),  " Tidy " , sb.ToString(), true );
116              }
117 
118               if  (!Page.ClientScript.IsStartupScriptRegistered( " Init " ))
119              {
120                  Page.ClientScript.RegisterStartupScript(this.GetType(),  " Init " ,  " <script type=/ " text / javascript / " >window.onload = Tidy;</script>  " ,  false );
121              }
122 
123              base.OnPreRender(e);
124          }
125 
126           protected  override void Render(HtmlTextWriter writer)
127          {
128              OnRebuildHeader();         
129              base.Render(writer);
130          }
131           protected  override void CreateChildControls()
132          {
133              Control parent  =  this.Parent;
134 
135               if  (DesignMode  ==   false )
136              {
137                   // 生成头容器 < DIV >
138                  System.Web.UI.HtmlControls.HtmlGenericControl div  =   new  System.Web.UI.HtmlControls.HtmlGenericControl( " DIV " );
139                  div.ID  =   " divHeaderContainer " ;
140                  div.Style.Add( " width " , this.Width.ToString());
141                  parent.Controls.Add(div);
142 
143                  Control gridView  =  this;
144                  parent.Controls.Remove(gridView);
145                   
146                  pnlScroll.Style.Add( " width " , this.Width.ToString());
147                  pnlScroll.Style.Add( " OVERFLOW-Y " ,  " scroll " );
148                  pnlScroll.Style.Add( " OVERFLOW-X " ,  " hidden " );
149         
150                  pnlScroll.Controls.Add(this);
151                  parent.Controls.Add(pnlScroll);
152 
153                  ChildControlsCreated  =   true ;
154              }
155 
156              base.CreateChildControls();            
157          }
158      
159           protected  virtual void OnRebuildHeader()
160          {
161               // 重新构造Head
162               if  (RebuildHeader ! =  null)
163              {
164                  RebuildHeaderEventArgs args  =   new  RebuildHeaderEventArgs();
165                  args.GridViewObject  =  this;
166                  args.HeaderRowObject  =  this.HeaderRow;
167 
168                  RebuildHeader(this, args);
169              }
170              
171          }       
172      } 

    2. 文件RebuildHeaderEventArgs.cs 代码

 1  ///   <summary>
 2       ///  Author: [ ChengKing(ZhengJian) ] 
 3       ///  Blog:   Http://blog.csdn.net/ChengKing
 4       ///  Date:   2007/4/3
 5       ///   </summary>
 6       ///   <summary>
 7       ///  承载重构Header事件所需的参数[Author:ChengKing(ZhengJian)]
 8       ///   </summary>
 9       public   class  RebuildHeaderEventArgs : EventArgs
10      {
11           private  GridViewFixedMultiHeader _GridViewObject;
12           private  GridViewRow _HeaderRowObject;
13 
14           ///   <summary>
15           ///  存储GrivViewExtend对象本身
16           ///   </summary>
17           public  GridViewFixedMultiHeader GridViewObject
18          {
19               get
20              {
21                   return  _GridViewObject;
22              }
23               set
24              {
25                  _GridViewObject  =  value;
26              }
27          }
28 
29           ///   <summary>
30           ///  存储GrivViewExtend的HeaderRow对象
31           ///   </summary>
32           public  GridViewRow HeaderRowObject
33          {
34               get
35              {
36                   return  _HeaderRowObject;
37              }
38               set
39              {
40                  _HeaderRowObject  =  value;
41              }
42          }
43      }

   3. 测试页面文件default.aspx代码, 直接拖动一个控件到设计器就OK了. 不需要设置任何属性.

1 <div>
2    <asp:GridView ID="GridViewFixedMultiHeader1" runat="server" </asp:GridView>                  
3 </div>

   4. 在新增自定义事件中增加表头行代码, 这里增加三行表头HeaderRow.

 1  ///   <summary>
 2       ///  具体重写方法, 此方法比较灵活, 可以任意设置您需要创建的格式, 比如更复杂的表格
 3       ///  另外, 可以直接从第二个参数中取得控件对象引用
 4       ///   </summary>
 5       ///   <param name="sender"></param>
 6       ///   <param name="e"></param>
 7       protected   void  GridViewExpend1_RebuildHeader( object  sender, EventArgs e)
 8      {
 9           // 取得参数e中包含的对象的引用        
10          GridViewFixedMultiHeader currentGVE  =  ((RebuildHeaderEventArgs)e).GridViewObject;   // 到操作当前GridView的对象引用
11          GridViewRow currentHeaderRow  =  ((RebuildHeaderEventArgs)e).HeaderRowObject;  /// /到操作当前GridView's HeaderRow的对象引用
12 
13 
14           /// <Add line 1>
15           /// /在当前HeaderRow上面增加一行
16           // 创建一个行并设置与GridViewExtend当前的头类型风格一致
17          GridViewRow willAddHeaderRow  =   new  GridViewRow( 0 ,  0 , DataControlRowType.Header, DataControlRowState.Normal);
18          willAddHeaderRow.Font.Bold  =   true ;
19          willAddHeaderRow.BackColor  =  Color.FromName( " #003399 " );
20          willAddHeaderRow.ForeColor  =  Color.FromName( " #CCCCFF " );
21          TableCell cell  =   new  TableCell();
22          cell.Text  =   " Number " ;
23          cell.HorizontalAlign  =  HorizontalAlign.Center;
24          willAddHeaderRow.Cells.Add(cell);
25          cell  =   new  TableCell();
26          cell.Text  =   " Detail " ;
27          cell.ColumnSpan  =   2 ;
28          cell.HorizontalAlign  =  HorizontalAlign.Center;
29          willAddHeaderRow.Cells.Add(cell);
30           // 添加到GridView
31          currentGVE.Controls[ 0 ].Controls.AddAt( 0 , willAddHeaderRow);
32 
33 
34           /// <Add line 2>
35           /// /在当前HeaderRow上面再增加一行
36           // 同样创建一个行并设置与GridViewExtend当前的头类型风格一致
37          willAddHeaderRow  =   new  GridViewRow( 0 ,  0 , DataControlRowType.Header, DataControlRowState.Normal);
38          willAddHeaderRow.Font.Bold  =   true ;
39          willAddHeaderRow.BackColor  =  Color.FromName( " #003399 " );
40          willAddHeaderRow.ForeColor  =  Color.FromName( " #CCCCFF " );
41 
42          cell  =   new  TableCell();
43          cell.Text  =   " Fruits category information " ;
44          cell.ColumnSpan  =   3 ;
45          cell.HorizontalAlign  =  HorizontalAlign.Center;
46          willAddHeaderRow.Cells.Add(cell);
47           // 添加到GridView
48          currentGVE.Controls[ 0 ].Controls.AddAt( 0 , willAddHeaderRow);  
49       
50           // 还可以继续增加N个表头行;
51           // 不管增加多么, GridView控件都能够自动检测到HeaderRow的个数, 并且能够正确呈现滚动条
52           // ..;  
53           // ..; 
54      }

 

(五). 示例代码下载

        http://www.cnblogs.com/Files/MVP33650/extendgridviewfixedmultiheader.rar

 

(六). 控件开发其它相关文章:

        http://blog.csdn.net/ChengKing/category/288694.aspx