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

所属类别：ASP.net
文章作者：hwencai
推荐指数：★★★★
文档人气：120
本周人气：3
发布日期：2007-2-6

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

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false

" Inherits="WebDataGridColumn.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
          <title>WebForm1</title>
          <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
          <meta name="CODE_LANGUAGE" Content="C#">
          <meta name="vs_defaultClientScript" content="JavaScript">
          <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
         
         <style type="text/css">
             .fixCol {}{ ; LEFT: expression(this.offsetParent.scrollLeft); POSITION: relative }
         </style>
     </HEAD>
     <body>
        <form id="Form1" method="post" runat="server">
             <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="80%" border="0" align="center">
                 <TR>
                     <TD height="50" align="center">
                         <asp:Label id="Label1" runat="server" Font-Bold="True" ForeColor="Red" Font-Size="X-Large">DataGrid冻结列或头部的例子</asp:Label></TD>
                 </TR>
                 <TR>
                     <TD align="center">
                         <asp:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966"

BorderStyle="None" BorderWidth="1px"
                             BackColor="White" CellPadding="4" AutoGenerateColumns="False" Width="805px">
                             <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
                             <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
                             <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
                             <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
                             <Columns>
                                 <asp:BoundColumn DataField="LastName" HeaderText="姓名">
                                     
                                     <HeaderStyle CssClass="fixCol"></HeaderStyle>
                                     <ItemStyle CssClass="fixCol"></ItemStyle>
                                 </asp:BoundColumn>
                                 <asp:BoundColumn DataField="Title" HeaderText="标题"></asp:BoundColumn>
                                 <asp:BoundColumn DataField="BirthDate" HeaderText="出生日期"></asp:BoundColumn>
                                 <asp:BoundColumn DataField="Address" HeaderText="家庭住址"></asp:BoundColumn>
                             </Columns>
                             <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
                         </asp:DataGrid></TD>
                 </TR>
             </TABLE>
         </form>
     </body>
</HTML>

二.冻结头部：

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"

Inherits="WebDataGridColumn.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
          <title>WebForm1</title>
          <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
          <meta name="CODE_LANGUAGE" Content="C#">
          <meta name="vs_defaultClientScript" content="JavaScript">
          <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
         
         <style type="text/css">
             .fixTitle {}{ POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop) }
         </style>
     </HEAD>
     <body>
         <form id="Form1" method="post" runat="server">
             <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="80%" border="0" align="center">
                 <TR>
                     <TD height="50" align="center">
                         <asp:Label id="Label1" runat="server" Font-Bold="True" ForeColor="Red" Font-Size="X-Large">DataGrid冻结列或头部的例子</asp:Label></TD>
                 </TR>
                 <TR>
                     <TD align="center">
                         <asp:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966"

BorderStyle="None" BorderWidth="1px"
                             BackColor="White" CellPadding="4" AutoGenerateColumns="False" Width="805px">
                             <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
                             
                             <ItemStyle ForeColor="#330099" BackColor="White" CssClass="fixTitle"></ItemStyle>
                             <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000" CssClass="fixTitle"></HeaderStyle>

                             <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
                             <Columns>
                                 <asp:BoundColumn DataField="LastName" HeaderText="姓名"></asp:BoundColumn>
                                 <asp:BoundColumn DataField="Title" HeaderText="标题"></asp:BoundColumn>
                                 <asp:BoundColumn DataField="BirthDate" HeaderText="出生日期"></asp:BoundColumn>
                                 <asp:BoundColumn DataField="Address" HeaderText="家庭住址"></asp:BoundColumn>
                             </Columns>
                             <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
                         </asp:DataGrid></TD>
                 </TR>
             </TABLE>
         </form>
     </body>
</HTML>