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>")]
10publicclassGridViewFixedMultiHeader:GridView
11{
12[Description("当需要重新构造Header时触发此事件")]
13publiceventSystem.EventHandlerRebuildHeader;
14
15privateSystem.Web.UI.WebControls.PanelpnlScroll=newSystem.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))]
26publicUnitScrollWidth
27{
28get
29{
30returnpnlScroll.Width;
31}
32set
33{
34pnlScroll.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))]
46publicUnitScrollHeight
47{
48get
49{
50returnpnlScroll.Height;
51}
52set
53{
54pnlScroll.Height=value;
55}
56}
57#endregion
58
59protectedoverridevoidOnPreRender(EventArgse)
60{
61
62StringBuildersb=newStringBuilder();
63sb.Append("functionTidy()");
64sb.Append("{");
65sb.Append("vargve=document.getElementById(\""+this.UniqueID+"\");");
66sb.Append("if(gve.rows.length>0)");
67sb.Append("{");
68sb.Append("vara1=document.getElementById(\"divHeaderContainer\");");
69sb.Append("vartable1=document.createElement(\"table\");");
70sb.Append("vartbody1=document.createElement(\"tbody\");");
71sb.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;\";");
73sb.Append("vari;");
74sb.Append("varblnIfFind=false;");
75sb.Append("for(i=gve.rows.length-1;i>=0;i--)");
76sb.Append("{");
77sb.Append("if(gve.rows[i].children(0).tagName.toUpperCase()!=\"TH\"&&blnIfFind==false)");
78sb.Append("{");
79sb.Append("continue;");
80sb.Append("}");
81sb.Append("if(blnIfFind==false)");
82sb.Append("{");
83sb.Append("blnIfFind=true;");
84sb.Append("}");
85sb.Append("if(tbody1.children.length==0)");
86sb.Append("{");
87sb.Append("varnewRow=gve.rows[i].cloneNode(true);");
88//sb.Append("newRow.style.cssText='border-style:solid;border-color:gray;border-width:1pxthin';");
89sb.Append("tbody1.appendChild(newRow);");
90sb.Append("}");
91sb.Append("else");
92sb.Append("{");
93sb.Append("varnewRow=gve.rows[i].cloneNode(true);");
94//sb.Append("newRow.style.cssText='border-style:solid;border-color:gray;border-width:1pxthin';");
95sb.Append("tbody1.insertBefore(newRow,tbody1.firstChild);");
96sb.Append("}");
97sb.Append("}");
98sb.Append("table1.appendChild(tbody1);");
99sb.Append("a1.appendChild(table1);");
100sb.Append("for(i=0;i<gve.rows.length-1;i++)");
101sb.Append("{");
102sb.Append("if(gve.rows[0].children(0).tagName.toUpperCase()!=\"TH\")");
103sb.Append("{");
104sb.Append("gve.deleteRow(0);");
105sb.Append("continue;");
106sb.Append("}");
107sb.Append("gve.deleteRow(0);");
108sb.Append("break;");
109sb.Append("}");
110sb.Append("}");
111sb.Append("}");
112
113if(!Page.ClientScript.IsClientScriptBlockRegistered("Tidy"))
114{
115Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"Tidy",sb.ToString(),true);
116}
117
118if(!Page.ClientScript.IsStartupScriptRegistered("Init"))
119{
120Page.ClientScript.RegisterStartupScript(this.GetType(),"Init","<scripttype=\"text/javascript\">window.onload=Tidy;</script>",false);
121}
122
123base.OnPreRender(e);
124}
125
126protectedoverridevoidRender(HtmlTextWriterwriter)
127{
128OnRebuildHeader();
129base.Render(writer);
130}
131protectedoverridevoidCreateChildControls()
132{
133Controlparent=this.Parent;
134
135if(DesignMode==false)
136{
137//生成头容器<DIV>
138System.Web.UI.HtmlControls.HtmlGenericControldiv=newSystem.Web.UI.HtmlControls.HtmlGenericControl("DIV");
139div.ID="divHeaderContainer";
140div.Style.Add("width",this.Width.ToString());
141parent.Controls.Add(div);
142
143ControlgridView=this;
144parent.Controls.Remove(gridView);
145
146pnlScroll.Style.Add("width",this.Width.ToString());
147pnlScroll.Style.Add("OVERFLOW-Y","scroll");
148pnlScroll.Style.Add("OVERFLOW-X","hidden");
149
150pnlScroll.Controls.Add(this);
151parent.Controls.Add(pnlScroll);
152
153ChildControlsCreated=true;
154}
155
156base.CreateChildControls();
157}
158
159protectedvirtualvoidOnRebuildHeader()
160{
161//重新构造Head
162if(RebuildHeader!=null)
163{
164RebuildHeaderEventArgsargs=newRebuildHeaderEventArgs();
165args.GridViewObject=this;
166args.HeaderRowObject=this.HeaderRow;
167
168RebuildHeader(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>
9publicclassRebuildHeaderEventArgs:EventArgs
10{
11privateGridViewFixedMultiHeader_GridViewObject;
12privateGridViewRow_HeaderRowObject;
13
14///<summary>
15///存储GrivViewExtend对象本身
16///</summary>
17publicGridViewFixedMultiHeaderGridViewObject
18{
19get
20{
21return_GridViewObject;
22}
23set
24{
25_GridViewObject=value;
26}
27}
28
29///<summary>
30///存储GrivViewExtend的HeaderRow对象
31///</summary>
32publicGridViewRowHeaderRowObject
33{
34get
35{
36return_HeaderRowObject;
37}
38set
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>
7protectedvoidGridViewExpend1_RebuildHeader(objectsender,EventArgse)
8{
9//取得参数e中包含的对象的引用
10GridViewFixedMultiHeadercurrentGVE=((RebuildHeaderEventArgs)e).GridViewObject;//到操作当前GridView的对象引用
11GridViewRowcurrentHeaderRow=((RebuildHeaderEventArgs)e).HeaderRowObject;////到操作当前GridView'sHeaderRow的对象引用
12
13
14///<Addline1>
15////在当前HeaderRow上面增加一行
16//创建一个行并设置与GridViewExtend当前的头类型风格一致
17GridViewRowwillAddHeaderRow=newGridViewRow(0,0,DataControlRowType.Header,DataControlRowState.Normal);
18willAddHeaderRow.Font.Bold=true;
19willAddHeaderRow.BackColor=Color.FromName("#003399");
20willAddHeaderRow.ForeColor=Color.FromName("#CCCCFF");
21TableCellcell=newTableCell();
22cell.Text="Number";
23cell.HorizontalAlign=HorizontalAlign.Center;
24willAddHeaderRow.Cells.Add(cell);
25cell=newTableCell();
26cell.Text="Detail";
27cell.ColumnSpan=2;
28cell.HorizontalAlign=HorizontalAlign.Center;
29willAddHeaderRow.Cells.Add(cell);
30//添加到GridView
31currentGVE.Controls[0].Controls.AddAt(0,willAddHeaderRow);
32
33
34///<Addline2>
35////在当前HeaderRow上面再增加一行
36//同样创建一个行并设置与GridViewExtend当前的头类型风格一致
37willAddHeaderRow=newGridViewRow(0,0,DataControlRowType.Header,DataControlRowState.Normal);
38willAddHeaderRow.Font.Bold=true;
39willAddHeaderRow.BackColor=Color.FromName("#003399");
40willAddHeaderRow.ForeColor=Color.FromName("#CCCCFF");
41
42cell=newTableCell();
43cell.Text="Fruitscategoryinformation";
44cell.ColumnSpan=3;
45cell.HorizontalAlign=HorizontalAlign.Center;
46willAddHeaderRow.Cells.Add(cell);
47//添加到GridView
48currentGVE.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