有时候，在线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之固定表数据滚动的更多相关文章

  1. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  2. css表格表头表尾固定，表身滚动

    表头表尾固定,表身滚动实现用了3个table标签 <!DOCTYPE html> <html> <head> <meta http-equiv="C ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（18）-权限管理系统-表数据

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(18)-权限管理系统-表数据 这一节,我们插入数据来看看数据流,让各位同学,知道这个权限表交互是怎么一个流 ...

  4. 用C# ASP.net将数据库中的数据表导出到Excel中

    需要用到组件GridView和一个button即可. 给GridView添加一个数据源, 选择你想要的数据库中的表的字段,添加成功后GridView中就显示数据. 再添加一个button,双击控件添加 ...

  5. 在asp.net中导出表格Excel数据

    第一步:需要引用org.in2bits.MyXls程序集到使用页面 第二步:前台代码 <asp:Button ID="LeadingOut" runat="serv ...

  6. 在GridControl表格控件中实现多层级主从表数据的展示

    在一些应用场景中,我们需要实现多层级的数据表格显示,如常规的二级主从表数据展示,甚至也有多个层级展示的需求,那么我们如何通过DevExpress的GridControl控表格件实现这种业务需求呢?本篇 ...

  7. Asp.net并发请求导致的数据重复插入问题

    前段时间工作中,有客户反应了系统中某类待办重复出现两次的情况.我核实了数据之后,分析认为是并发请求下导致的数据不一致性问题,并做了重现.其实这并不是一个需要频繁调用的功能,但是客户连续点击了两次,导致 ...

  8. 【第二篇】ASP.NET MVC快速入门之数据注解（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 一种HBase表数据迁移方法的优化

    1.背景调研: 目前存在的hbase数据迁移主要分如下几类: 根据上图,可以看出: 其实主要分为两种方式:(1)hadoop层:因为hbase底层是基于hdfs存储的,所以可以通过把hdfs上的数据拷 ...

随机推荐

  1. 蓝桥杯 基础练习 BASIC-23 芯片测试

    基础练习 芯片测试   时间限制:1.0s   内存限制:512.0MB 问题描述 有n(2≤n≤20)块芯片,有好有坏,已知好芯片比坏芯片多. 每个芯片都能用来测试其他芯片.用好芯片测试其他芯片时, ...

  2. 2017年总结&2018年计划

    谈一谈2017年计划: 1.完成壁咚项目2.写一个自己的扫描器3.完善web安全手册.4.搞一个大漏洞或CVE的漏洞 完成进度:1.壁咚这个项目,当初发誓要用java来写完,其实最开始就已经写完了,前 ...

  3. spring Annotation

    使用注解替代xml 在前几章的笔记基础上添加使用注解的形式 1.配置applicationContext 添加context schema <?xml version="1.0&quo ...

  4. 问题：c# json解析；结果：c# 解析JSON的几种办法

    c# 解析JSON的几种办法 欲成为海洋大师,必知晓海中每一滴水的真名. 刚开始只是想找一个转换JSON数组的方法,结果在MSDN翻到一大把. 搜索过程中免不了碰到一大堆名词:WCF => Da ...

  5. C语言学习笔记--动态内存分配

    1. 动态内存分配的意义 (1)C 语言中的一切操作都是基于内存的. (2)变量和数组都是内存的别名. ①内存分配由编译器在编译期间决定 ②定义数组的时候必须指定数组长度 ③数组长度是在编译期就必须确 ...

  6. hadoop job -kill 与 yarn application -kii（作业卡了或作业重复提交或MapReduce任务运行到running job卡住）

    问题详情  解决办法 [hadoop@master ~]$ hadoop job -kill job_1493782088693_0001 DEPRECATED: Use of this script ...

  7. OpenCV4Android 不需要安装OpenCVManager，就可以运行的方法

    http://blog.csdn.net/yanzi1225627/article/details/27863615 OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种 ...

  8. MyBatis总结一：快速入门

    简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 ...

  9. 关于android studio中使用class.forname()方法动态获取类实例报NO CLASS FOUND异常的几种处理方法

    最近在做一个项目的时候需要用到反射来回调子类的方法,但是在反射过程中总是在class.forname()方法抛出NO CLASS FOUND异常,经过几部检查,问题解决,在此总结一下引起该问题的原因 ...

  10. 关于web.xml中的<welcome-file-list>中的默认首页文件

    先看我的配置文件: <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome ...