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

效果如下图：

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

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

css 实现 Gridview 固定 表头

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。