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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
实例解析Array和String方法
Dec 14 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
详解Node.js使用token进行认证的简单示例
May 25 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
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php解析url的三个示例
2014/01/20 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
多广告投放代码 推荐
2006/11/13 Javascript
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JavaScript中this详解
2015/09/01 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
20招让你的Python飞起来!
2016/09/27 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
python 列表降维的实例讲解
2018/06/28 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python基础之文件读取的讲解
2019/02/16 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
大学社团活动策划书
2014/01/26 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
党员创先争优活动总结
2014/05/04 职场文书
关于青春的演讲稿
2014/05/05 职场文书
职位说明书范文
2014/05/07 职场文书
篮球赛口号
2014/06/18 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Redis数据同步之redis shake的实现方法
2022/04/21 Redis