用css实现Gridview固定表头和列

时间 2020-08-10 标签 css 实现 gridview 固定表头

这里用css实现Gridview固定表头和列须要使用div重叠，以及两个div滚动条同时滚动的方法。

1、div重叠方法：css

外层用relative相对定位，里面用absolute绝对定位，就能很好的实现你的要求了。z-index是用来控制div的显示优先级别。

以下的一个html实例：html

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">前端

<html>dom

<head>ui

<metahttp-equiv="Content-Type" content="text/html;charset=iso-8859-1">this

<title>UntitledDocument</title>spa

div#div1{position:relative;} server

div#a1{background-color:red;position:absolute;z-index:1}xml

div#a2{background-color:blue;position:absolute;z-index:2}

div#a3{background-color:Green;position:absolute;z-index:3}

</style>

</head>

<body>

111111111111111

</div>

222222222

</div>

33333

</div>

</body>

</html>

效果以下图：代表a一、a二、a3三个div的内容重叠了

能够依次将a三、a2删除查看效果就能更明白了。

或者将a2内容加个换行，a3内容加两个换行，代码以下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=iso-8859-1">

<title>Untitled Document</title>

div#div1{position:relative;}

div#a1{background-color:red;position:absolute;z-index:1}

div#a2{background-color:blue;position:absolute;z-index:2}

div#a3{background-color:Green;position:absolute;z-index:3}

</style>

</head>

<body>

<divid="a1">

1111111111111111111

</div>

<divid="a2">

<br/>

222222222

</div>

<divid="a3">

<br/>

33333

</div>

</div></body>

</html>

效果以下图：代表a一、a二、a3三个div的内容重叠了，看到这里应该明白了。

2、锁定表头和列的方法就是这个思路：

一、第一步：
重叠三个div：a一、a二、a3中分别放置三个GridView，数据源同样，样式也同样。a1设置好宽度=620，高度=500，其中a2的高度与GridView的表头高度相等，宽度=600（比a1少的20是滚动条的宽度），a3的宽度与GridView要固定的列的宽度相等，高度=500（比a1少的20是滚动条的宽度），a二、a3隐藏滚动条，此时容许，能够看到一个完整的GridView数据显示，并带有垂直和水平。可是移动滚动条，表头和要固定的列没有移动。

二、第二步：

设置a1水平滚动条移动，a2的水平滚动条也同时移动；设置a1垂直滚动条移动，a3的垂直滚动条也同时移动。

代码以下：

<divid="a1" οnscrοll="document.getElementById('a2').scrollLeft = this.scrollLeft;document.getElementById('a3').scrollTop= this.scrollTop;">

其中：scrollLeft 表明水平滚动条；scrollTop表明垂直滚动条

3、实例

前端代码：

<%@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>

</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，虽然实现了功能，但方法很笨，仍是应该找到找到简便点的方法。