收藏

下载资源 加入VIP,免费下载

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

上传人：b****5 文档编号：3539213 上传时间：2022-11-23 格式：DOCX 页数：8 大小：46.59KB

下载 相关 举报

第1页 / 共8页

第2页 / 共8页

第3页 / 共8页

第4页 / 共8页

第5页 / 共8页

点击查看更多>>

下载资源

资源描述

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

《用css实现Gridview固定表头和列.docx》由会员分享，可在线阅读，更多相关《用css实现Gridview固定表头和列.docx（8页珍藏版）》请在冰豆网上搜索。

用css实现Gridview固定表头和列

 

用css实现Gridview固定表头和列

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

一、div重叠方法：

外层用relative相对定位，里面用absolute绝对定位，就能很好的实现你的要求了。

z-index是用来控制div的显示优先级别。

如下的一个html实例：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:

//www.w3.org/TR/html4/strict.dtd">

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}

   

 111111*********

  

  

 222222222

  

  

33333

  

 

效果如下图：

表明a1、a2、a3三个div的内容重叠了

 

可以依次将a3、a2删除查看效果就能更明白了。

 

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

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:

//www.w3.org/TR/html4/strict.dtd">

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}

        

        111111*********1111

        

        

        

        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//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

//www.w3.org/1999/xhtml">

    

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

}

 

    

    

        

GridViewID="GridView1"  runat="server" Width="1000px"Height="500px">

        

GridView>

   

    

       

GridViewID="GridView2"  runat="server" Width="1000px"Height="500px">

       

GridView>

   

   

       

GridViewID="GridView3"  runat="server" Width="1000px"Height="500px">

       

GridView>

   

 

    

后台代码：

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

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心