js实现的GridView即表头固定表体有滚动条且可滚动_javascript技巧

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
// 计算数据,完全可以从数据看取得
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] = "测试" + 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);
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}

protected void Page_Load( object sender, EventArgs e )
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed");
GridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
}

</script>

<script type="text/javascript">
function s() {
var t = document.getElementById("<%=GridView1.ClientID%>");
var t2 = t.cloneNode(true)
for (i = t2.rows.length - 1; i > 0; i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建表头固定,表体可滚动的GridView</title>
</head>
<body>
<form id="Form1" runat="server">
<table>
<tr>
<td>
<div id="a">
</div>
<div style="overflow-y: scroll; height: 200px">
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" Width="560">
<HeaderStyle BackColor="#EDEDED" Height="26px" />
</asp:GridView>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

时间: 2024-11-16 11:17:10

js实现的GridView即表头固定表体有滚动条且可滚动_javascript技巧的相关文章

js实现的GridView即表头固定表体有滚动条且可滚动

 实现GridView,表头固定,表体有滚动条且可滚动,下面有个不错的示例,希望对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

JS当前页面登录注册框,固定DIV,底层阴影的实例代码_javascript技巧

这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!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"&

js-怎么实现表格的表头固定 ,表格不要滚动条

问题描述 怎么实现表格的表头固定 ,表格不要滚动条 表格显示10行 或更多的数据 ,下拉页面的时候看不见表头 ,怎么能让表头像固定到底部的导航一样 ,随着页面的下拉移动. 解决方案 CSS表格固定表头示例CSS固定表格table表头页头 解决方案二: 你把你的代码发进来我们好给你修改啊 解决方案三: 使用固定定位吧,如果固定定位满足不了你的要求,就用js控制吧 解决方案四: 可以考虑使用div做表头,好操作定位!当然也可以考虑使用双表格对接,一表格做表头+二表格做表身放数据,这样表头也可以控制定

使用.net网站制作采购订单界面有表头和表体(思路)

问题描述 语言:C#(网站)软件:vs2010数据库:sql2008R2这个单子由表头和表体组成,具体要求:表头为一行有个对应的表头sql数据库表,表体为多行(20+)有个对应的表体sql数据库表.表体单一按钮:本来是想表体一行一行插如图:{好像没什么能做多行表体的控件(免费)}可能会出现:中间断电.点了关闭等情况这张只有表体(手动删除<做个删除界面>?重新做?)表头表体同一按钮:如果表头和第一行数据直接用同一个按钮插入,后面判断表头是否存在会不会影响速度(2W+数据<单表头数据>

JS实现部分HTML固定页面顶部随屏滚动效果_javascript技巧

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如

js如何实现点击标签文字,文字在文本框出现_javascript技巧

js实现点击标签文字,文字出现在文本框里,下面2种方法实现的功能略有不同,总体来说方法一功能更强大. 第一种方法:随意点击任何标签都会出现在文本框中,如何第二次点击标签,对应的文字就会在文本框中消失. <style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style> <in

js+css实现增加表单可用性之提示文字_javascript技巧

平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: 复制代码 代码如下: <form id="search"> <input type="text" id="keyword" name="keyword" value="请输入关键字">

JS两种类型的表单提交方法实例分析_javascript技巧

本文实例分析了JS两种类型的表单提交方法.分享给大家供大家参考,具体如下: 1.原始的 <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="

Fullpage.js固定导航栏-实现定位导航栏_javascript技巧

FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工