会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
过江的博客
博客园
首页
新随笔
管理
订阅
在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中的注释去掉,要不会出错
posted on
2006-06-23 16:14
过江
阅读(
473
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告