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


Posted in Javascript onFebruary 19, 2014
<%@ 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>
Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
document.forms[].submit()使用介绍
Feb 19 #Javascript
页面按钮禁用与解除禁用的方法
Feb 19 #Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 #Javascript
悬浮数字的实现案例
Feb 19 #Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 #Javascript
js实现身份证号码验证的简单实例
Feb 19 #Javascript
js实现表格字段排序
Feb 19 #Javascript
You might like
使用Composer安装Yii框架的方法
2016/03/15 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
Vue代码整洁之去重方法整理
2019/08/06 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python字典get()方法用法分析
2015/04/17 Python
浅谈Django REST Framework限速
2017/12/12 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python批量解压zip文件的方法
2019/08/20 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Pycharm中如何关掉python console
2020/10/27 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
《散步》教学反思
2014/03/02 职场文书
物理教育专业求职信
2014/06/25 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
大学生村官入党自传
2015/06/26 职场文书
七年级数学教学反思
2016/02/17 职场文书