ASP.NET-GridView之固定表数据滚动
有时候,在线Web开发时,需要显示的数据往往会超过我们规定的表格长度,所以为了方便显示大量数据,为了美观,这里提出了两种显示数据方式。
①可以滚动显示数据但是表头未能获取
效果显示
前端DEMO
<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
<form id="form1" runat="server">
<div id="headdiv" style="top: 16px; text-align:center; left: 152px; position: absolute; width: 629px;height: 21px;word-wrap:break-word; overflow:hidden;"><!--不需要显示表头水平滚动条-->
</div>
<div id="bodydiv" style="top: 33px; left: 152px; position: absolute; width: 647px;height: 300px; overflow: auto" onscroll="headdiv.scrollLeft=scrollLeft"><!--表体的水平滚动条拖动触发表头的水平滚动事件-->
<!--Gridview中必须定义表头和表体相同的宽度-->
<asp:GridView ID="GridView1" BorderColor="Black" OnRowDataBound="GridView1_RowDataBound" runat="server" AutoGenerateColumns="False" Font-Size="12px" width="629px">
<Columns>
<asp:BoundField DataField="ID" HeaderText="编号" >
<HeaderStyle Width="40px" />
<ItemStyle Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="EmpID" HeaderText="账号" >
<HeaderStyle Width="70px" />
<ItemStyle Width="70px" />
</asp:BoundField>
<asp:BoundField DataField="EmpRealName" HeaderText="姓名" >
<HeaderStyle Width="60px" />
<ItemStyle Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="EmpSex" HeaderText="性别" >
<HeaderStyle Width="40px" />
<ItemStyle Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="EmpAddress" HeaderText="住址" >
<HeaderStyle Width="140px" />
<ItemStyle Width="140px" />
</asp:BoundField>
<asp:BoundField DataField="EmpZipCode" HeaderText="邮编" >
<HeaderStyle Width="40px" />
<ItemStyle Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="EmpBirthday" HeaderText="生日" DataFormatString="{0:d}" HtmlEncode="False" >
<HeaderStyle Width="120px" />
<ItemStyle Width="120px" />
</asp:BoundField>
<asp:BoundField DataField="EmpSalary" HeaderText="月薪" >
<HeaderStyle Width="40px" />
<ItemStyle Width="40px" />
</asp:BoundField>
</Columns>
<RowStyle HorizontalAlign="Center" />
<PagerStyle HorizontalAlign="Center" />
<HeaderStyle BackColor="Azure" Font-Bold="True" ForeColor="Black" CssClass="Freezing" Font-Size="12px" HorizontalAlign="Center"/>
</asp:GridView>
</div>
</form>
</body></span>
②可以滚动显示数据表头一直存在
效果显示
改善部分,在前者基础上增加了JavaScript方法
DEMO
<span style="font-family:Microsoft YaHei;font-size:18px;"> <script language="javascript" type="text/javascript">
function init()
{
var bodyGridView=document.getElementById("<%=GridView1.ClientID%>");
var headGridView=bodyGridView.cloneNode(true);
for(i=headGridView.rows.length-1;i>0;i--)
headGridView.deleteRow(i);
bodyGridView.deleteRow(0);//删掉数据行
headdiv.appendChild(headGridView);//删掉表头行
}
window.onload=init;
</script></span>
感谢您的宝贵时间······
ASP.NET-GridView之固定表数据滚动的更多相关文章
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- css表格表头表尾固定,表身滚动
表头表尾固定,表身滚动实现用了3个table标签 <!DOCTYPE html> <html> <head> <meta http-equiv="C ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(18)-权限管理系统-表数据
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(18)-权限管理系统-表数据 这一节,我们插入数据来看看数据流,让各位同学,知道这个权限表交互是怎么一个流 ...
- 用C# ASP.net将数据库中的数据表导出到Excel中
需要用到组件GridView和一个button即可. 给GridView添加一个数据源, 选择你想要的数据库中的表的字段,添加成功后GridView中就显示数据. 再添加一个button,双击控件添加 ...
- 在asp.net中导出表格Excel数据
第一步:需要引用org.in2bits.MyXls程序集到使用页面 第二步:前台代码 <asp:Button ID="LeadingOut" runat="serv ...
- 在GridControl表格控件中实现多层级主从表数据的展示
在一些应用场景中,我们需要实现多层级的数据表格显示,如常规的二级主从表数据展示,甚至也有多个层级展示的需求,那么我们如何通过DevExpress的GridControl控表格件实现这种业务需求呢?本篇 ...
- Asp.net并发请求导致的数据重复插入问题
前段时间工作中,有客户反应了系统中某类待办重复出现两次的情况.我核实了数据之后,分析认为是并发请求下导致的数据不一致性问题,并做了重现.其实这并不是一个需要频繁调用的功能,但是客户连续点击了两次,导致 ...
- 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 一种HBase表数据迁移方法的优化
1.背景调研: 目前存在的hbase数据迁移主要分如下几类: 根据上图,可以看出: 其实主要分为两种方式:(1)hadoop层:因为hbase底层是基于hdfs存储的,所以可以通过把hdfs上的数据拷 ...
随机推荐
- (转)基于PHP——简单的WSDL的创建(WSDL篇)
本文转载自:http://blog.csdn.net/rrr4578/article/details/24451943 1.建立WSDL文件 建立WSDL的工具很多,eclipse.zends ...
- MySQL/InnoDB tips & tricks
本文讨论的是 MySQL 5.7. 1.混用 * 和列名会产生解析错误,要避免这个错误,要使用 tbl_name.* 的格式. 2.where 子句中不能使用 select 中定义的别名,因为 SQL ...
- 开发环境入门 linux基础 (部分)awk 赋值变量 if
awk 常用于处理格式非常明显的文件 awk -F: '{print $1}' /etc/passwd 含义:取冒号分隔符的第一段内容 $0 指取所有! NF 指有几段内容 $NF 取最后一段内容 ...
- javascript——对象的概念——Object(未完)
http://www.blogjava.net/zkjbeyond/archive/2006/04/16/41336.html javascript中对象只包括属性和方法两种成员.ECMA-262 把 ...
- Yii::app()
Yii::app()返回的是你在index.php里创建的CWebApplication实例. 在一次请求处理过程中,这是个唯一的实例. Yii::app()主要负责一些全局性的功能模块,比如Yii: ...
- ORACLE体系结构一 (逻辑结构)-表空间、段、区和数据块
一.Oracle的逻辑结构 Oracle的逻辑结构是一种层次结构.主要由:表空间.段.区和数据块等概念组成.逻辑结构是面向用户的,用户使用Oracle开发应用程序使用的就是逻辑结构.数据库存储层次结构 ...
- C语言基础问题总结
Double 类型用 %f 接受会产生错误,应该用%lf C语言中SIN,COS的参数为弧度,角度应先转换为弧度才能计算,否则出错 三角形的判断条件,任意两边长度和大于第三边 闰年判断条件整百年为40 ...
- c++11: thread_local
thread_local变量是C++ 11新引入的一种存储类型.它会影响变量的存储周期(Storage duration),C++中有4种存储周期: automatic static dynamic ...
- elasticsearch2.x ik插件
先来一个标准分词(standard),配置如下: curl -XPUT localhost:/local -d '{ "settings" : { "analysis&q ...
- 蓝桥杯【入门训练】 Fibonacci数列
问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n ...