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

在Asp.Net页面里,当显示数据项过多时,需冻结DataGrid的某一列或头部。实现方法是用CSS样式控制,文中给出了冻结某一列和冻结头部的具体代码示例,运行时需去掉DataGrid中的注释,否则会出错。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写在前面:在Asp.Net页面中,有时候我们需要冻结DataGrid中的某一列,比如显示的数据项过多时,我们需要让第一列不动,拖动横向滚动条时其他列隐藏,这时就需要冻结列了;另外,有时候也需要让DataGrid的头部不动,拖动纵向滚动条时,下面的数据项可以滚动。在实现的过程中,其实就是用了CSS样式来控制,一起看一下。
一.冻结某一列:
 1ExpandedBlockStart.gifContractedBlock.gif<%dot.gif@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebDataGridColumn.WebForm1" %>
 2None.gif<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3None.gif<HTML>
 4None.gif    <HEAD>
 5None.gif        <title>WebForm1</title>
 6None.gif        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
 7None.gif        <meta name="CODE_LANGUAGE" Content="C#">
 8None.gif        <meta name="vs_defaultClientScript" content="JavaScript">
 9None.gif        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10None.gif        <!--要冻结哪一列,就把fixCol这个CSS加到HeaderStyle-CssClass和ItemStyle-CssClass-->
11ExpandedBlockStart.gifContractedBlock.gif        <style type="text/css">dot.gif
12ExpandedSubBlockStart.gifContractedSubBlock.gif            .fixCol {dot.gif}{ ; LEFT: expression(this.offsetParent.scrollLeft); POSITION: relative }
13ExpandedBlockEnd.gif        
</style>
14None.gif    </HEAD>
15None.gif    <body>
16None.gif        <form id="Form1" method="post" runat="server">
17None.gif            <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="80%" border="0" align="center">
18None.gif                <TR>
19None.gif                    <TD height="50" align="center">
20None.gif                        <asp:Label id="Label1" runat="server" Font-Bold="True" ForeColor="Red" Font-Size="X-Large">DataGrid冻结列或头部的例子</asp:Label></TD>
21None.gif                </TR>
22None.gif                <TR>
23None.gif                    <TD align="center">
24None.gif                        <asp:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
25None.gif                            BackColor="White" CellPadding="4" AutoGenerateColumns="False" Width="805px">
26None.gif                            <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
27None.gif                            <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
28None.gif                            <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
29None.gif                            <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
30None.gif                            <Columns>
31None.gif                                <asp:BoundColumn DataField="LastName" HeaderText="姓名">
32None.gif                                    <!--下面就是冻结列-->
33None.gif                                    <HeaderStyle CssClass="fixCol"></HeaderStyle>
34None.gif                                    <ItemStyle CssClass="fixCol"></ItemStyle>
35None.gif                                </asp:BoundColumn>
36None.gif                                <asp:BoundColumn DataField="Title" HeaderText="标题"></asp:BoundColumn>
37None.gif                                <asp:BoundColumn DataField="BirthDate" HeaderText="出生日期"></asp:BoundColumn>
38None.gif                                <asp:BoundColumn DataField="Address" HeaderText="家庭住址"></asp:BoundColumn>
39None.gif                            </Columns>
40None.gif                            <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
41None.gif                        </asp:DataGrid></TD>
42None.gif                </TR>
43None.gif            </TABLE>
44None.gif        </form>
45None.gif    </body>
46None.gif</HTML>
47None.gif

二.冻结头部:
 1ExpandedBlockStart.gifContractedBlock.gif<%dot.gif@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebDataGridColumn.WebForm1" %>
 2None.gif<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3None.gif<HTML>
 4None.gif    <HEAD>
 5None.gif        <title>WebForm1</title>
 6None.gif        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
 7None.gif        <meta name="CODE_LANGUAGE" Content="C#">
 8None.gif        <meta name="vs_defaultClientScript" content="JavaScript">
 9None.gif        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10None.gif        <!--把fixTitle这个CSS加到DataGrid的HeaderStyle-CssClass和ItemStyle-CssClass-->
11ExpandedBlockStart.gifContractedBlock.gif        <style type="text/css">dot.gif
12ExpandedSubBlockStart.gifContractedSubBlock.gif            .fixTitle {dot.gif}{ POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop) }
13ExpandedBlockEnd.gif        
</style>
14None.gif    </HEAD>
15None.gif    <body>
16None.gif        <form id="Form1" method="post" runat="server">
17None.gif            <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="80%" border="0" align="center">
18None.gif                <TR>
19None.gif                    <TD height="50" align="center">
20None.gif                        <asp:Label id="Label1" runat="server" Font-Bold="True" ForeColor="Red" Font-Size="X-Large">DataGrid冻结列或头部的例子</asp:Label></TD>
21None.gif                </TR>
22None.gif                <TR>
23None.gif                    <TD align="center">
24None.gif                        <asp:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
25None.gif                            BackColor="White" CellPadding="4" AutoGenerateColumns="False" Width="805px">
26None.gif                            <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
27None.gif                            <!--冻结头部-->
28None.gif                            <ItemStyle ForeColor="#330099" BackColor="White" CssClass="fixTitle"></ItemStyle>
29None.gif                            <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000" CssClass="fixTitle"></HeaderStyle>
30None.gif                            
31None.gif                            <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
32None.gif                            <Columns>
33None.gif                                <asp:BoundColumn DataField="LastName" HeaderText="姓名"></asp:BoundColumn>
34None.gif                                <asp:BoundColumn DataField="Title" HeaderText="标题"></asp:BoundColumn>
35None.gif                                <asp:BoundColumn DataField="BirthDate" HeaderText="出生日期"></asp:BoundColumn>
36None.gif                                <asp:BoundColumn DataField="Address" HeaderText="家庭住址"></asp:BoundColumn>
37None.gif                            </Columns>
38None.gif                            <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
39None.gif                        </asp:DataGrid></TD>
40None.gif                </TR>
41None.gif            </TABLE>
42None.gif        </form>
43None.gif    </body>
44None.gif</HTML>
45None.gif

 好了,实现很简单,大家可以试一下,有时候还是挺有用的^_^
注意:大家在运行的时候把DataGrid中的注释去掉,要不会出错
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值