在ASP.NET页面中冻结DataGrid的列或头部

写在前面：在Asp.Net页面中，有时候我们需要冻结DataGrid中的某一列，比如显示的数据项过多时，我们需要让第一列不动，拖动横向滚动条时其他列隐藏，这时就需要冻结列了；另外，有时候也需要让DataGrid的头部不动，拖动纵向滚动条时，下面的数据项可以滚动。在实现的过程中，其实就是用了CSS样式来控制，一起看一下。
一.冻结某一列：

 1 <% @ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebDataGridColumn.WebForm1"  %>
 2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
 3 < HTML >
 4      < HEAD >
 5          < title > WebForm1 </ title >
 6          < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
 7          < meta  name ="CODE_LANGUAGE"  Content ="C#" >
 8          < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
 9          < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
10          <!-- 要冻结哪一列，就把fixCol这个CSS加到HeaderStyle-CssClass和ItemStyle-CssClass -->
11          < style  type ="text/css" >
12            .fixCol {}{ ; LEFT: expression(this.offsetParent.scrollLeft); POSITION: relative }
13         </ style >
14      </ HEAD >
15      < body >
16          < form  id ="Form1"  method ="post"  runat ="server" >
17              < TABLE  id ="Table1"  cellSpacing ="1"  cellPadding ="1"  width ="80%"  border ="0"  align ="center" >
18                  < TR >
19                      < TD  height ="50"  align ="center" >
20                          < asp:Label  id ="Label1"  runat ="server"  Font-Bold ="True"  ForeColor ="Red"  Font-Size ="X-Large" > DataGrid冻结列或头部的例子 </ asp:Label ></ TD >
21                  </ TR >
22                  < TR >
23                      < TD  align ="center" >
24                          < asp:DataGrid  id ="DataGrid1"  runat ="server"  BorderColor ="#CC9966"  BorderStyle ="None"  BorderWidth ="1px"
25                             BackColor ="White"  CellPadding ="4"  AutoGenerateColumns ="False"  Width ="805px" >
26                              < SelectedItemStyle  Font-Bold ="True"  ForeColor ="#663399"  BackColor ="#FFCC66" ></ SelectedItemStyle >
27                              < ItemStyle  ForeColor ="#330099"  BackColor ="White" ></ ItemStyle >
28                              < HeaderStyle  Font-Bold ="True"  ForeColor ="#FFFFCC"  BackColor ="#990000" ></ HeaderStyle >
29                              < FooterStyle  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ FooterStyle >
30                              < Columns >
31                                  < asp:BoundColumn  DataField ="LastName"  HeaderText ="姓名" >
32                                      <!-- 下面就是冻结列 -->
33                                      < HeaderStyle  CssClass ="fixCol" ></ HeaderStyle >
34                                      < ItemStyle  CssClass ="fixCol" ></ ItemStyle >
35                                  </ asp:BoundColumn >
36                                  < asp:BoundColumn  DataField ="Title"  HeaderText ="标题" ></ asp:BoundColumn >
37                                  < asp:BoundColumn  DataField ="BirthDate"  HeaderText ="出生日期" ></ asp:BoundColumn >
38                                  < asp:BoundColumn  DataField ="Address"  HeaderText ="家庭住址" ></ asp:BoundColumn >
39                              </ Columns >
40                              < PagerStyle  HorizontalAlign ="Center"  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ PagerStyle >
41                          </ asp:DataGrid ></ TD >
42                  </ TR >
43              </ TABLE >
44          </ form >
45      </ body >
46 </ HTML >
47

二.冻结头部：

 1 <% @ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebDataGridColumn.WebForm1"  %>
 2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
 3 < HTML >
 4      < HEAD >
 5          < title > WebForm1 </ title >
 6          < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
 7          < meta  name ="CODE_LANGUAGE"  Content ="C#" >
 8          < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
 9          < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
10          <!-- 把fixTitle这个CSS加到DataGrid的HeaderStyle-CssClass和ItemStyle-CssClass -->
11          < style  type ="text/css" >
12            .fixTitle {}{ POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop) }
13         </ style >
14      </ HEAD >
15      < body >
16          < form  id ="Form1"  method ="post"  runat ="server" >
17              < TABLE  id ="Table1"  cellSpacing ="1"  cellPadding ="1"  width ="80%"  border ="0"  align ="center" >
18                  < TR >
19                      < TD  height ="50"  align ="center" >
20                          < asp:Label  id ="Label1"  runat ="server"  Font-Bold ="True"  ForeColor ="Red"  Font-Size ="X-Large" > DataGrid冻结列或头部的例子 </ asp:Label ></ TD >
21                  </ TR >
22                  < TR >
23                      < TD  align ="center" >
24                          < asp:DataGrid  id ="DataGrid1"  runat ="server"  BorderColor ="#CC9966"  BorderStyle ="None"  BorderWidth ="1px"
25                             BackColor ="White"  CellPadding ="4"  AutoGenerateColumns ="False"  Width ="805px" >
26                              < SelectedItemStyle  Font-Bold ="True"  ForeColor ="#663399"  BackColor ="#FFCC66" ></ SelectedItemStyle >
27                              <!-- 冻结头部 -->
28                              < ItemStyle  ForeColor ="#330099"  BackColor ="White"  CssClass ="fixTitle" ></ ItemStyle >
29                              < HeaderStyle  Font-Bold ="True"  ForeColor ="#FFFFCC"  BackColor ="#990000"  CssClass ="fixTitle" ></ HeaderStyle >
30                             
31                              < FooterStyle  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ FooterStyle >
32                              < Columns >
33                                  < asp:BoundColumn  DataField ="LastName"  HeaderText ="姓名" ></ asp:BoundColumn >
34                                  < asp:BoundColumn  DataField ="Title"  HeaderText ="标题" ></ asp:BoundColumn >
35                                  < asp:BoundColumn  DataField ="BirthDate"  HeaderText ="出生日期" ></ asp:BoundColumn >
36                                  < asp:BoundColumn  DataField ="Address"  HeaderText ="家庭住址" ></ asp:BoundColumn >
37                              </ Columns >
38                              < PagerStyle  HorizontalAlign ="Center"  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ PagerStyle >
39                          </ asp:DataGrid ></ TD >
40                  </ TR >
41              </ TABLE >
42          </ form >
43      </ body >
44 </ HTML >
45

  好了，实现很简单，大家可以试一下，有时候还是挺有用的^_^
注意：大家在运行的时候把DataGrid中的注释去掉，要不会出错