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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 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 SQL防注入代码集合
2008/04/25 PHP
php 动态添加记录
2009/03/10 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP多文件上传实例
2015/07/09 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
python中列表元素连接方法join用法实例
2015/04/07 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python3 中文文件读写方法
2018/01/23 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
如何通过python实现全排列
2020/02/11 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
大学班级计划书
2014/04/29 职场文书
法人委托书范本格式
2014/09/15 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
信访稳定工作汇报
2014/10/27 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android