用css实现Gridview固定表头和列
这里用css实现Gridview固定表头和列需要使用div重叠，以及两个div滚动条同时滚动的方法。
一、div重叠方法：
外层用relative相对定位，里面用absolute绝对定位，就能很好的实现你的要求了。z-index是用来控制div的显示优先级别。
如下的一个html实例：
111111111111111 222222222 33333
效果如下图：表明a1、a2、a3三个div的内容重叠了
可以依次将a3、a2删除查看效果就能更明白了。
或者将a2内容加个换行，a3内容加两个换行，代码如下：
1111111111111111111
222222222
33333
效果如下图：表明a1、a2、a3三个div的内容重叠了，看到这里应该明白了。
二、锁定表头和列的方法就是这个思路：
1、第一步：
重叠三个div：a1、a2、a3中分别放置三个GridView，数据源一样，样式也一样。a1设置好宽度=620，高度=500，其中a2的高度与GridView的表头高度相等，宽度=600（比a1少的20是滚动条的宽度），a3的宽度与GridView要固定的列的宽度相等，高度=500（比a1少的20是滚动条的宽度），a2、a3隐藏滚动条，此时允许，可以看到一个完整的GridView数据显示，并带有垂直和水平。但是移动滚动条，表头和要固定的列没有移动。
2、第二步：
设置a1水平滚动条移动，a2的水平滚动条也同时移动；设置a1垂直滚动条移动，a3的垂直滚动条也同时移动。
代码如下：
其中：scrollLeft 代表水平滚动条；scrollTop代表垂直滚动条
三、实例
前端代码：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="FixGridViewHeadColumn.aspx.cs"Inherits="FixGridViewHeadColumn"%>
DOCTYPEhtml PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>固定gridview表头和列title>
<styletype="text/css">
body{
margin:50px;
}
#div1{position:relative;}
#a1{width:620px; height:520px;
background-color:Green; overflow:auto;
position:absolute; z-index:1
}
#a2{width:600px; height:24px;
background-color:Blue; overflow:hidden;
position:absolute; z-index:3
}
#a3{width:122px; height:500px; background-color:Red ;
overflow:hidden;position:absolute;z-index:2
}
style>
head>
<body>
<formid="form1" runat="server">
<divid="div1">
<divid="a1" onscroll="document.getElementById('a2').scrollLeft =this.scrollLeft;document.getElementById('a3').scrollTop=this.scrollTop;">
<asp:GridViewID="GridView1" runat="server" Width="1000px"Height="500px">
asp:GridView>
div>
<divid="a2" >
<asp:GridViewID="GridView2" runat="server" Width="1000px"Height="500px">
asp:GridView>
div>
<divid="a3" >
<asp:GridViewID="GridView3" runat="server" Width="1000px"Height="500px">
asp:GridView>
div>
div>
form>
body>
html>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partialclass FixGridViewHeadColumn: System.Web.UI.Page
{
protectedvoid Page_Load(objectsender,EventArgs e)
{
System.Data.DataTable dt =newSystem.Data.DataTable();
System.Data.DataRow dr;
//添加列名
dt.Columns.Add(new System.Data.DataColumn("学生班级",typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("学生姓名",typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("语文",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("数学",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("英语",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("计算机",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("物理",typeof(System.Decimal)));
dt.Columns.Add(newSystem.Data.DataColumn("化学",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("生物",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("地理",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("历史",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("美术",typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("政治",typeof(System.Decimal)));
//用循环添加行数据
for(int i = 0; i < 50; i++)
{
System.Random rd =newSystem.Random(Environment.TickCount* i); ;
dr = dt.NewRow();
dr[0] = "班级" + i.ToString();
dr[1] = "虚拟人" + i.ToString();
dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[6] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[7] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[8] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[9] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[10] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[11] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[12] = System.Math.Round(rd.NextDouble() * 100, 2);
dt.Rows.Add(dr);
}
GridView1.DataSource = dt;
GridView1.DataBind();
GridView2.DataSource = dt;
GridView2.DataBind();
GridView3.DataSource = dt;
GridView3.DataBind();
}
}
最后效果图：
本方法用了3个gridview，虽然实现了功能，但方法很笨，还是应该找到找到简便点的方法。