IDC资讯中心
写在前面：在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>
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
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中的注释去掉，要不会出错
