编程思想：
1、定义两个div，一个放置表头，一个放置表体。
2、用GridView输出数据，并将其放置在表体Div里。
3、利用js分离出表头和表体，分别放置在表头Div和表体Div中。
Html代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表头固定，表体可滚动的GridView</title>
<script type="text/javascript">
function init()
{
var tbBody = document.getElementById("<%=GridView1.ClientID%>");
var tbHead = tbBody.cloneNode(true)
for(i = tbHead.rows.length -1;i > 0;i--)
tbHead.deleteRow(i)
tbBody.deleteRow(0)
divContent.appendChild(tbHead)
}
window.onload = init
</script>
</head>
<body>
<form id="Form1" runat="server">
<table>
<tr>
<td>
<div id="divContent">
</div>
<div style="overflow-y: scroll; height: 200px">
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" Width="560">
<HeaderStyle BackColor="#666666" ForeColor="#ffffff" Height="26px" />
</asp:GridView>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表头固定，表体可滚动的GridView</title>
<script type="text/javascript">
function init()
{
var tbBody = document.getElementById("<%=GridView1.ClientID%>");
var tbHead = tbBody.cloneNode(true)
for(i = tbHead.rows.length -1;i > 0;i--)
tbHead.deleteRow(i)
tbBody.deleteRow(0)
divContent.appendChild(tbHead)
}
window.onload = init
</script>
</head>
<body>
<form id="Form1" runat="server">
<table>
<tr>
<td>
<div id="divContent">
</div>
<div style="overflow-y: scroll; height: 200px">
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" Width="560">
<HeaderStyle BackColor="#666666" ForeColor="#ffffff" Height="26px" />
</asp:GridView>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
CS代码：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
System.Collections.ICollection CreateDataSource( )
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("列1", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列2", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列3", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列4", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列5", typeof(System.String)));
for (int i = 0; i < 50; i++)
{
dr = dt.NewRow();
dr[0] = "数据" + i.ToString();
dr[1] = "数据" + i.ToString();
dr[2] = "数据" + i.ToString();
dr[3] = "数据" + i.ToString();
dr[4] = "数据" + i.ToString();
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}
protected void Page_Load( object sender, EventArgs e )
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed");
GridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
}
}
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
System.Collections.ICollection CreateDataSource( )
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("列1", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列2", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列3", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列4", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("列5", typeof(System.String)));
for (int i = 0; i < 50; i++)
{
dr = dt.NewRow();
dr[0] = "数据" + i.ToString();
dr[1] = "数据" + i.ToString();
dr[2] = "数据" + i.ToString();
dr[3] = "数据" + i.ToString();
dr[4] = "数据" + i.ToString();
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}
protected void Page_Load( object sender, EventArgs e )
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed");
GridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
}
}
或是以下一个例子：
代码：
1 C#
2
3 <% @ Page Language = " C# " AutoEventWireup = " true " %>
4
5 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN "
6 " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
7
8 < script runat = " server " >
9 // 计算数据，完全可以从数据看取得
10 ICollection CreateDataSource( )
11 {
12 System.Data.DataTable dt = new System.Data.DataTable();
13 System.Data.DataRow dr;
14 dt.Columns.Add( new System.Data.DataColumn( " 学生班级 " , typeof (System.String)));
15 dt.Columns.Add( new System.Data.DataColumn( " 学生姓名 " , typeof (System.String)));
16 dt.Columns.Add( new System.Data.DataColumn( " 语文 " , typeof (System.Decimal)));
17 dt.Columns.Add( new System.Data.DataColumn( " 数学 " , typeof (System.Decimal)));
18 dt.Columns.Add( new System.Data.DataColumn( " 英语 " , typeof (System.Decimal)));
19 dt.Columns.Add( new System.Data.DataColumn( " 计算机 " , typeof (System.Decimal)));
20
21 for ( int i = 0 ; i < 50 ; i ++ )
22 {
23 System.Random rd = new System.Random(Environment.TickCount * i); ;
24 dr = dt.NewRow();
25 dr[ 0 ] = " 班级 " + i.ToString();
26 dr[ 1 ] = " 【孟子E章】 " + i.ToString();
27 dr[ 2 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
28 dr[ 3 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
29 dr[ 4 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
30 dr[ 5 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
31 dt.Rows.Add(dr);
32 }
33 System.Data.DataView dv = new System.Data.DataView(dt);
34 return dv;
35 }
36
37 protected void Page_Load( object sender, EventArgs e )
38 {
39 if ( ! IsPostBack)
40 {
41 GridView1.Attributes.Add( " style " , " table-layout:fixed " );
42 GridView1.DataSource = CreateDataSource();
43 GridView1.DataBind();
44 }
45 }
46
47 </ script >
48
49 < script type = " text/javascript " >
50 function s()
51 {
52 var t = document.getElementById( " <%=GridView1.ClientID%> " );
53 var t2 = t.cloneNode( true )
54 for (i = t2.rows.length - 1 ;i > 0 ;i -- )
55 t2.deleteRow(i)
56 t.deleteRow( 0 )
57 a.appendChild(t2)
58 }
59 window.onload = s
60 </ script >
61
62 < html xmlns = " http://www.w3.org/1999/xhtml " >
63 < head >
64 < title > 创建表头固定，表体可滚动的GridView </ title >
65 </ head >
66 < body >
67 < form id = " Form1 " runat = " server " >
68 < table >
69 < tr >
70 < td >
71 < div id = " a " >
72 </ div >
73 < div style = " overflow-y: scroll; height: 200px " >
74 < asp:GridView ID = " GridView1 " runat = " server " Font - Size = " 12px " BackColor = " #FFFFFF "
75 GridLines = " Both " CellPadding = " 4 " Width = " 560 " >
76 < HeaderStyle BackColor = " #EDEDED " Height = " 26px " />
77 </ asp:GridView >
78 </ div >
79 </ td >
80 </ tr >
81 </ table >
82 </ form >
83 </ body >
84 </ html >
85
2
3 <% @ Page Language = " C# " AutoEventWireup = " true " %>
4
5 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN "
6 " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
7
8 < script runat = " server " >
9 // 计算数据，完全可以从数据看取得
10 ICollection CreateDataSource( )
11 {
12 System.Data.DataTable dt = new System.Data.DataTable();
13 System.Data.DataRow dr;
14 dt.Columns.Add( new System.Data.DataColumn( " 学生班级 " , typeof (System.String)));
15 dt.Columns.Add( new System.Data.DataColumn( " 学生姓名 " , typeof (System.String)));
16 dt.Columns.Add( new System.Data.DataColumn( " 语文 " , typeof (System.Decimal)));
17 dt.Columns.Add( new System.Data.DataColumn( " 数学 " , typeof (System.Decimal)));
18 dt.Columns.Add( new System.Data.DataColumn( " 英语 " , typeof (System.Decimal)));
19 dt.Columns.Add( new System.Data.DataColumn( " 计算机 " , typeof (System.Decimal)));
20
21 for ( int i = 0 ; i < 50 ; i ++ )
22 {
23 System.Random rd = new System.Random(Environment.TickCount * i); ;
24 dr = dt.NewRow();
25 dr[ 0 ] = " 班级 " + i.ToString();
26 dr[ 1 ] = " 【孟子E章】 " + i.ToString();
27 dr[ 2 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
28 dr[ 3 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
29 dr[ 4 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
30 dr[ 5 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
31 dt.Rows.Add(dr);
32 }
33 System.Data.DataView dv = new System.Data.DataView(dt);
34 return dv;
35 }
36
37 protected void Page_Load( object sender, EventArgs e )
38 {
39 if ( ! IsPostBack)
40 {
41 GridView1.Attributes.Add( " style " , " table-layout:fixed " );
42 GridView1.DataSource = CreateDataSource();
43 GridView1.DataBind();
44 }
45 }
46
47 </ script >
48
49 < script type = " text/javascript " >
50 function s()
51 {
52 var t = document.getElementById( " <%=GridView1.ClientID%> " );
53 var t2 = t.cloneNode( true )
54 for (i = t2.rows.length - 1 ;i > 0 ;i -- )
55 t2.deleteRow(i)
56 t.deleteRow( 0 )
57 a.appendChild(t2)
58 }
59 window.onload = s
60 </ script >
61
62 < html xmlns = " http://www.w3.org/1999/xhtml " >
63 < head >
64 < title > 创建表头固定，表体可滚动的GridView </ title >
65 </ head >
66 < body >
67 < form id = " Form1 " runat = " server " >
68 < table >
69 < tr >
70 < td >
71 < div id = " a " >
72 </ div >
73 < div style = " overflow-y: scroll; height: 200px " >
74 < asp:GridView ID = " GridView1 " runat = " server " Font - Size = " 12px " BackColor = " #FFFFFF "
75 GridLines = " Both " CellPadding = " 4 " Width = " 560 " >
76 < HeaderStyle BackColor = " #EDEDED " Height = " 26px " />
77 </ asp:GridView >
78 </ div >
79 </ td >
80 </ tr >
81 </ table >
82 </ form >
83 </ body >
84 </ html >
85