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}:GridViewExpendHeaderrunat=server></{0}:GridViewExpendHeader> " )]
10 public class GridViewFixedMultiHeader:GridView
11 {
12 [Description( " 当需要重新构造Header时触发此事件 " )]
13 public event System.EventHandlerRebuildHeader;
14
15 private System.Web.UI.WebControls.PanelpnlScroll = 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 UnitScrollWidth
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 UnitScrollHeight
47 {
48 get
49 {
50 return pnlScroll.Height;
51 }
52 set
53 {
54 pnlScroll.Height = value;
55 }
56 }
57 #endregion
58
59 protected overridevoidOnPreRender(EventArgse)
60 {
61
62 StringBuildersb = new StringBuilder();
63 sb.Append( " functionTidy() " );
64 sb.Append( " { " );
65 sb.Append( " vargve=document.getElementById(\""+this.UniqueID+ " \ " ); " );
66 sb.Append( " if(gve.rows.length>0) " );
67 sb.Append( " { " );
68 sb.Append( " vara1=document.getElementById(\ " divHeaderContainer \ " ); " );
69 sb.Append( " vartable1=document.createElement(\ " table \ " ); " );
70 sb.Append( " vartbody1=document.createElement(\ " tbody \ " ); " );
71 sb.Append( " table1.style.cssText=\ " table - layout:fixed;border - style:solid;border - color:gray;border - width:1pxthin; \ " ; " );
72 // sb.Append( " table1.style.cssText=\ " table - layout:fixed;color:#CCCCFF;background - color:# 003399 ;font - weight:bold; \ " ; " );
73 sb.Append( " vari; " );
74 sb.Append( " varblnIfFind=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( " varnewRow=gve.rows[i].cloneNode(true); " );
88 // sb.Append( " newRow.style.cssText='border-style:solid;border-color:gray;border-width:1pxthin'; " );
89 sb.Append( " tbody1.appendChild(newRow); " );
90 sb.Append( " } " );
91 sb.Append( " else " );
92 sb.Append( " { " );
93 sb.Append( " varnewRow=gve.rows[i].cloneNode(true); " );
94 // sb.Append( " newRow.style.cssText='border-style:solid;border-color:gray;border-width:1pxthin'; " );
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 " , " <scripttype=\ " text / javascript \ " >window.οnlοad=Tidy;</script> " , false );
121 }
122
123 base.OnPreRender(e);
124 }
125
126 protected overridevoidRender(HtmlTextWriterwriter)
127 {
128 OnRebuildHeader();
129 base.Render(writer);
130 }
131 protected overridevoidCreateChildControls()
132 {
133 Controlparent = this.Parent;
134
135 if (DesignMode == false )
136 {
137 // 生成头容器 < DIV >
138 System.Web.UI.HtmlControls.HtmlGenericControldiv = 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 ControlgridView = 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 virtualvoidOnRebuildHeader()
160 {
161 // 重新构造Head
162 if (RebuildHeader! = null)
163 {
164 RebuildHeaderEventArgsargs = 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 GridViewFixedMultiHeaderGridViewObject
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 GridViewRowHeaderRowObject
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:GridViewID="GridViewFixedMultiHeader1"runat="server"</asp:GridView>
3</div>

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

1 /// <summary>
2 /// 具体重写方法,此方法比较灵活,可以任意设置您需要创建的格式,比如更复杂的表格
3 /// 另外,可以直接从第二个参数中取得控件对象引用
4 /// </summary>
5 /// <paramname="sender"></param>
6 /// <paramname="e"></param>
7 protected void GridViewExpend1_RebuildHeader( object sender,EventArgse)
8 {
9 // 取得参数e中包含的对象的引用
10 GridViewFixedMultiHeadercurrentGVE = ((RebuildHeaderEventArgs)e).GridViewObject; // 到操作当前GridView的对象引用
11 GridViewRowcurrentHeaderRow = ((RebuildHeaderEventArgs)e).HeaderRowObject; /// /到操作当前GridView'sHeaderRow的对象引用
12
13
14 /// <Addline1>
15 /// /在当前HeaderRow上面增加一行
16 // 创建一个行并设置与GridViewExtend当前的头类型风格一致
17 GridViewRowwillAddHeaderRow = 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 TableCellcell = 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 /// <Addline2>
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 = " Fruitscategoryinformation " ;
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