写在前面:在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
![](Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](Images/OutliningIndicators/None.gif)
3
![](Images/OutliningIndicators/None.gif)
4
![](Images/OutliningIndicators/None.gif)
5
![](Images/OutliningIndicators/None.gif)
6
![](Images/OutliningIndicators/None.gif)
7
![](Images/OutliningIndicators/None.gif)
8
![](Images/OutliningIndicators/None.gif)
9
![](Images/OutliningIndicators/None.gif)
10
![](Images/OutliningIndicators/None.gif)
11
![](Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](Images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![](Images/OutliningIndicators/None.gif)
15
![](Images/OutliningIndicators/None.gif)
16
![](Images/OutliningIndicators/None.gif)
17
![](Images/OutliningIndicators/None.gif)
18
![](Images/OutliningIndicators/None.gif)
19
![](Images/OutliningIndicators/None.gif)
20
![](Images/OutliningIndicators/None.gif)
21
![](Images/OutliningIndicators/None.gif)
22
![](Images/OutliningIndicators/None.gif)
23
![](Images/OutliningIndicators/None.gif)
24
![](Images/OutliningIndicators/None.gif)
25
![](Images/OutliningIndicators/None.gif)
26
![](Images/OutliningIndicators/None.gif)
27
![](Images/OutliningIndicators/None.gif)
28
![](Images/OutliningIndicators/None.gif)
29
![](Images/OutliningIndicators/None.gif)
30
![](Images/OutliningIndicators/None.gif)
31
![](Images/OutliningIndicators/None.gif)
32
![](Images/OutliningIndicators/None.gif)
33
![](Images/OutliningIndicators/None.gif)
34
![](Images/OutliningIndicators/None.gif)
35
![](Images/OutliningIndicators/None.gif)
36
![](Images/OutliningIndicators/None.gif)
37
![](Images/OutliningIndicators/None.gif)
38
![](Images/OutliningIndicators/None.gif)
39
![](Images/OutliningIndicators/None.gif)
40
![](Images/OutliningIndicators/None.gif)
41
![](Images/OutliningIndicators/None.gif)
42
![](Images/OutliningIndicators/None.gif)
43
![](Images/OutliningIndicators/None.gif)
44
![](Images/OutliningIndicators/None.gif)
45
![](Images/OutliningIndicators/None.gif)
46
![](Images/OutliningIndicators/None.gif)
47
![](Images/OutliningIndicators/None.gif)
二.冻结头部:
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
![](Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](Images/OutliningIndicators/None.gif)
3
![](Images/OutliningIndicators/None.gif)
4
![](Images/OutliningIndicators/None.gif)
5
![](Images/OutliningIndicators/None.gif)
6
![](Images/OutliningIndicators/None.gif)
7
![](Images/OutliningIndicators/None.gif)
8
![](Images/OutliningIndicators/None.gif)
9
![](Images/OutliningIndicators/None.gif)
10
![](Images/OutliningIndicators/None.gif)
11
![](Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](Images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![](Images/OutliningIndicators/None.gif)
15
![](Images/OutliningIndicators/None.gif)
16
![](Images/OutliningIndicators/None.gif)
17
![](Images/OutliningIndicators/None.gif)
18
![](Images/OutliningIndicators/None.gif)
19
![](Images/OutliningIndicators/None.gif)
20
![](Images/OutliningIndicators/None.gif)
21
![](Images/OutliningIndicators/None.gif)
22
![](Images/OutliningIndicators/None.gif)
23
![](Images/OutliningIndicators/None.gif)
24
![](Images/OutliningIndicators/None.gif)
25
![](Images/OutliningIndicators/None.gif)
26
![](Images/OutliningIndicators/None.gif)
27
![](Images/OutliningIndicators/None.gif)
28
![](Images/OutliningIndicators/None.gif)
29
![](Images/OutliningIndicators/None.gif)
30
![](Images/OutliningIndicators/None.gif)
31
![](Images/OutliningIndicators/None.gif)
32
![](Images/OutliningIndicators/None.gif)
33
![](Images/OutliningIndicators/None.gif)
34
![](Images/OutliningIndicators/None.gif)
35
![](Images/OutliningIndicators/None.gif)
36
![](Images/OutliningIndicators/None.gif)
37
![](Images/OutliningIndicators/None.gif)
38
![](Images/OutliningIndicators/None.gif)
39
![](Images/OutliningIndicators/None.gif)
40
![](Images/OutliningIndicators/None.gif)
41
![](Images/OutliningIndicators/None.gif)
42
![](Images/OutliningIndicators/None.gif)
43
![](Images/OutliningIndicators/None.gif)
44
![](Images/OutliningIndicators/None.gif)
45
![](Images/OutliningIndicators/None.gif)
好了,实现很简单,大家可以试一下,有时候还是挺有用的^_^
注意:大家在运行的时候把DataGrid中的注释去掉,要不会出错
转载自:http://www.cnblogs.com/Terrylee/archive/2005/10/19/257576.html