用css实现Gridview固定表头和列

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

一、div重叠方法:

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

如下的一个html实例:

<!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>UntitledDocument</title>

<style type="text/css">

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>

<div id="div1">

   <div id="a1" >

 111111111111111

  </div>

  <div id="a2" >

 222222222

  </div>

  <div id="a3" >

33333

  </div>

</div>

</body>

</html>

 

效果如下图:表明a1、a2、a3三个div的内容重叠了

 
可以依次将a3、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>

<style type="text/css">

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>

<div id="div1">

         <divid="a1">

         1111111111111111111

         </div>

         <divid="a2">

         <br/>

         222222222

         </div>

         <divid="a3">

         <br/>

         <br/>

         33333

         </div>

</div></body>

</html>

 

效果如下图:表明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的垂直滚动条也同时移动。

代码如下:

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

其中: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:620pxheight:520px;

    background-color:Greenoverflow:auto;

    position:absolute;  z-index:1

}

#a2{width:600pxheight:24px;

    background-color:Blue;  overflow:hidden;

    position:absolute;  z-index:3

}

#a3{width:122pxheight: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,虽然实现了功能,但方法很笨,还是应该找到找到简便点的方法。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页