轉載自:http://blog.csdn.net/lifuyun/article/details/1688008, 原博客中附有源代碼
(一). 概述
1. 實現GridView表頭固定表體滾動效果
2. 繼承GridView的所有功能, 增加擴展功能, 表體滾動功能; 不需要另外加輔助滾動控件, 如<DIV>.
3. 支持多行表頭滾動, 此控件能夠自動檢測到使用者增加的表頭的行數. 準確的實現表頭滾動.
有增加GridView多表頭實現方案, 請看[多表頭自定義控件].
(二). 運行如圖
1. 單行表頭增加自動滾動效果
2. 多行表頭增加自動滾動效果
(三). 用法
1. 將GridViewExpendHeader控件Dll添加引用到Web站點工程中
2. 從工具箱拖動一個GridViewExpendHeader控件到設計器中
3. 設置GridViewExpendHeader控件的屬性.
a. 設置屬性窗口中新增的 "擴展" 類別中的兩個屬性, 這兩個屬性是指滾動區域的大小, 如下圖所示:
b. 設置GridView本身的高度Height, 這個高度是指滾動區域內的GridView的實際高度, 這個高度數值設置
要大於ScrollHeight滾動條才能夠呈現. 簡單地說, 本自定義控件自動會實現一個GridView(自己)
的父控件<DIV>, 然後再把自己放在裏面, 如果自己高度小於<DIV>高度了, 不用滾動就能夠顯示
全自己的數據, 滾動條就沒有呈現的意義了. 這裏講得有點囉嗦. .
4. F5運行即可
(四). 完整代碼
1. 主控件GridViewFixedMultiHeader類代碼
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 代碼
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>
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 }