在ASP.NET页面中冻结DataGrid的列或头部-CSDN博客

本文链接：https://blog.csdn.net/hwencai/article/details/1495552

写在前面：在Asp.Net页面中，有时候我们需要冻结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>