随笔 - 159  文章 - 1  评论 - 202 
在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 过江 阅读(92) 评论(0)  编辑 收藏 网摘 所属分类: asp.net2003 C#经典方法




标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

相关文章:

相关链接:

最新IT新闻:
应用程序架构指导包2.0 Beta 2发布
推波助澜 微软推出“I'm a PC”商店
火狐中国版正式发布
微软：中国移动全球率先使用IE Mobile 6
消息汇总:迅雷人事变动 员工与公关部说法大相径庭