用css实现Gridview固定表头和列.docx

1、用css实现Gridview固定表头和列用css实现Gridview固定表头和列这里用css实现Gridview固定表头和列需要使用div重叠，以及两个div滚动条同时滚动的方法。一、div重叠方法：外层用relative相对定位，里面用absolute绝对定位，就能很好的实现你的要求了。z-index是用来控制div的显示优先级别。如下的一个html实例：UntitledDocumentdiv#div1position:relative;div#a1background-color:red;position:absolute;z-index:1div#a2background-color:b

2、lue;position:absolute;z-index:2div#a3background-color:Green;position:absolute;z-index:3111111*22222222233333效果如下图：表明a1、a2、a3三个div的内容重叠了可以依次将a3、a2删除查看效果就能更明白了。或者将a2内容加个换行，a3内容加两个换行，代码如下：Untitled Documentdiv#div1position:relative;div#a1background-color:red;position:absolute;z-index:1div#a2background-c

3、olor:blue;position:absolute;z-index:2div#a3background-color:Green;position:absolute;z-index:3 111111*1111 222222222 33333 效果如下图：表明a1、a2、a3三个div的内容重叠了，看到这里应该明白了。二、锁定表头和列的方法就是这个思路：1、第一步：重叠三个div：a1、a2、a3中分别放置三个GridView，数据源一样，样式也一样。a1设置好宽度=620，高度=500，其中a2的高度与GridView的表头高度相等，宽度=600（比a1少的20是滚动条的宽度），a3的宽度与

4、GridView要固定的列的宽度相等，高度=500（比a1少的20是滚动条的宽度），a2、a3隐藏滚动条，此时允许，可以看到一个完整的GridView数据显示，并带有垂直和水平。但是移动滚动条，表头和要固定的列没有移动。2、第二步：设置a1水平滚动条移动，a2的水平滚动条也同时移动；设置a1垂直滚动条移动，a3的垂直滚动条也同时移动。代码如下：其中：scrollLeft代表水平滚动条；scrollTop代表垂直滚动条三、实例前端代码：固定gridview表头和列bodymargin:50px;#div1position:relative;#a1width:620px;height:520px;

5、background-color:Green;overflow:auto;position:absolute;z-index:1#a2width:600px;height:24px;background-color:Blue;overflow:hidden;position:absolute;z-index:3#a3width:122px;height:500px;background-color:Red;overflow:hidden;position:absolute;z-index:2后台代码：usingSystem;usingSystem.Collections.Generic;usi

6、ngSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Data;publicpartialclassFixGridViewHeadColumn: System.Web.UI.PageprotectedvoidPage_Load(objectsender,EventArgse) System.Data.DataTabledt =newSystem.Data.DataTable(); System.Data.DataRowdr;/添加列名 dt.Columns.Add(

7、newSystem.Data.DataColumn(学生班级,typeof(System.String); dt.Columns.Add(newSystem.Data.DataColumn(学生姓名,typeof(System.String); dt.Columns.Add(newSystem.Data.DataColumn(语文,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(数学,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(

8、英语,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(计算机,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(物理,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(化学,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(生物,typeof(System.Decimal);

9、dt.Columns.Add(newSystem.Data.DataColumn(地理,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(历史,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(美术,typeof(System.Decimal); dt.Columns.Add(newSystem.Data.DataColumn(政治,typeof(System.Decimal);/用循环添加行数据for(inti = 0; i 50;

10、i+) System.Randomrd =newSystem.Random(Environment.TickCount* i); ; dr = dt.NewRow(); dr0 =班级+ i.ToString(); dr1 =虚拟人+ i.ToString(); dr2 = System.Math.Round(rd.NextDouble() * 100, 2); dr3 = System.Math.Round(rd.NextDouble() * 100, 2); dr4 = System.Math.Round(rd.NextDouble() * 100, 2); dr5 = System.Ma

11、th.Round(rd.NextDouble() * 100, 2); dr6 = System.Math.Round(rd.NextDouble() * 100, 2); dr7 = System.Math.Round(rd.NextDouble() * 100, 2); dr8 = System.Math.Round(rd.NextDouble() * 100, 2); dr9 = System.Math.Round(rd.NextDouble() * 100, 2); dr10 = System.Math.Round(rd.NextDouble() * 100, 2); dr11 = S

12、ystem.Math.Round(rd.NextDouble() * 100, 2); dr12 = 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，虽然实现了功能，但方法很笨，还是应该找到找到简便点的方法。