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 相关文章推荐
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
微信小程序缓存过期时间的使用详情
May 12 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中file_get_contents高?用法实例
2014/09/24 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
深入理解React高阶组件
2017/09/28 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python中time.ctime()实例用法
2021/02/03 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
高中生期末评语
2014/01/28 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
核心价值观演讲稿
2014/05/13 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
海上钢琴师观后感
2015/06/03 职场文书
活动简报范文
2015/07/22 职场文书