创建表头固定,表体可滚动的GridView[CSS形式控制]

呵呵,和孟大哥的方法不同,这里主要用到---在css中加入javascript代码【如果不太了解 可以看看 CSS中expression使用简介
注意:这句firsttr.setAttribute("style","top:expression(document.getElementById('tC').scrollTop)");
不可以写成firsttr.style.top ="expression(document.getElementById('tC').scrollTop)";  在IE中这样是错误的
还有就是生成客户端时,在div id="tC" 中又有一个div【好像是.NET自动生成的】,但不影响我们的结果
代码测试通过,在IE6.0下运行通过

看代码:
Default3.aspx:

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
    
< title > 无标题页 </ title >
    
< style >
body 
{ 
    background-color
: #F0F0F0 ; 
    font
: 11px "verdana","Arial";
    width
:90%;
    margin-left
:auto;
    margin-right
:auto;    
    
}


.tScroll 
{
    border
: 1px #7494BF solid;
    background-color
: #ffffff;
      overflow
: scroll;
    overflow-x
:hidden;
    height
:200px;
    cursor
: default;
    
}


tr.tableHead 
{
    position
:relative;    /* 必须要有 */
    background-color
:#BFCEE7;
    height
: 16px; 
    text-align
: center;
    
}


td 
{  
    font
: 11px "Verdana", "Arial"; 
    
}


td.asBtn
{    
    border
: #7494BF solid;
    border-width
: 0px 1px 1px 0px; 
    
}


table 
{
    border
:0px;
    width
:100%;
    
}

</ style >

    
< script  language ="javascript"  type ="text/javascript" >
function ss()
{
    
var t = document.getElementById("<%=GridView1.ClientID%>");
    t.cellSpacing 
= 0;
    t.cellPadding 
= 0;
    
var firsttr = t.firstChild.firstChild;
    firsttr.setAttribute(
"style","top:expression(document.getElementById('tC').scrollTop)"); 
    firsttr.className 
= "tableHead";
    t.onselectstart 
= function(){return false;};
}

window.onload 
= ss;
    
</ script >

</ head >
< body >
    
< form  id ="Form1"  runat ="server" >
        
< div  class ="tScroll"  id ="tC" >
            
< asp:GridView  ID ="GridView1"  runat ="server"  Font-Size ="12px"  BackColor ="#FFFFFF"
                GridLines
="Both"  CellPadding ="4"  Width ="100%" >
                
< HeaderStyle  BackColor ="#EDEDED"  Height ="26px"   />
            
</ asp:GridView >
        
</ div >
    
</ form >
</ body >
</ html >

Default3.aspx.cs:

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  Default3 : System.Web.UI.Page
{
    
protected void Page_Load(object sender, EventArgs e)
    
{
        
if (!IsPostBack)
        
{
            GridView1.DataSource 
= CreateDataSource();
            GridView1.DataBind();
        }

    }



    
//计算数据,可以从数据库中取得
    System.Collections.ICollection CreateDataSource()
    
{
        System.Data.DataTable dt 
= new System.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)));

        
for (int i = 0; i < 50; i++)
        
{
            System.Random rd 
= new System.Random(Environment.TickCount * i); ;
            dr 
= dt.NewRow();
            dr[
0= "班级" + i.ToString();
            dr[
1= "【孟子E章】" + i.ToString();
            dr[
2= System.Math.Round(rd.NextDouble() * 1002);
            dr[
3= System.Math.Round(rd.NextDouble() * 1002);
            dr[
4= System.Math.Round(rd.NextDouble() * 1002);
            dr[
5= System.Math.Round(rd.NextDouble() * 1002);
            dt.Rows.Add(dr);
        }

        System.Data.DataView dv 
= new System.Data.DataView(dt);
        
return dv;
    }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值