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

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

<%@ 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

11

.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

二.冻结头部：

<%@ 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

11

.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

<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中的注释去掉，要不会出错

作者：TerryLee
出处：http://terrylee.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

posted @ 2005-10-19 08:38 TerryLee 阅读(2555) 评论(25) 编辑收藏

发表评论

回复引用

#1楼 2005-10-19 08:47 | exhjw [未注册用户]

整张效果图看先

回复引用

#2楼 2005-10-19 09:56 | aa [未注册用户]

你的注释是不是写反了

回复引用查看

#3楼 [楼主]2005-10-19 11:29 | Terrylee

To:aa
不好意思，代码贴反了:)

回复引用

#4楼 2005-10-19 21:53 | atliu [未注册用户]

我试好,头是不动,但是数据也不动了.

回复引用

#5楼 2005-10-19 21:55 | 不说也罢 [未注册用户]

    能不能头部和列一起“冻结”呢？

回复引用查看

#6楼 [楼主]2005-10-19 23:16 | Terrylee

TO:atliu
我看一下，可能是我贴代码时弄乱了

回复引用查看

#7楼 [楼主]2005-10-19 23:17 | Terrylee

TO:不说也罢
可以试一下，我没试

回复引用

#8楼 2005-10-21 08:20 | joy [未注册用户]

你太粗心了，也太小气了。

回复引用

#9楼 2005-12-07 10:55 | 锦瑟 [未注册用户]

datagrid本身又不能拖动的，一般都是在datagrid外面加一个div。但是显然加了div你这个css就没有作用了。

希望作者给出演示页面。

回复引用

#10楼 2006-03-24 17:58 | sjz [未注册用户]

不能冻结整个列，列头可以冻结，datagrid的数据冻结不了

郁闷中。。。。。。，谁有更好的方法阿！

回复引用

#11楼 2006-05-08 14:31 | javasion [未注册用户]

既然要发布出来，就要写清楚一点儿嘛。

回复引用

#12楼 2006-07-12 15:18 | bb168 [未注册用户]

試了一下,,,真的可以..解決了我苦找兩天的難題,,,謝謝.~~~

內容我借用了.~~~

回复引用查看

#13楼 [楼主]2006-07-12 16:28 | TerryLee

@bb168

不用客气，随便借用，呵呵:-)

回复引用

#14楼 2006-10-10 09:37 | 路過 [未注册用户]

這個方法拖動的時候反映特慢﹐怎么辦

回复引用

#15楼 2007-09-14 14:22 | tester [未注册用户]

试了下固定表头的效果非常难看

回复引用

#16楼 2007-09-30 20:58 | kevin_1234 [未注册用户]

这个必须要
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
而当<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

就无效了

回复引用

#17楼 2007-11-30 11:44 | zz74558744 [未注册用户]

--引用--------------------------------------------------
路過: 這個方法拖動的時候反映特慢﹐怎么辦
--------------------------------------------------------
--引用--------------------------------------------------
路過: 這個方法拖動的時候反映特慢﹐怎么辦
--------------------------------------------------------
用了這個效果後，拖動起來一卡一卡的，反映特慢，請問要如何解決？

社区新闻新用户注册刷新评论列表

标题

姓名

主页

(只有博主才能看到)