文档章节

无比强大的GridView,表头固定,表体有滚动条可滚动

深圳大道
 深圳大道
发布于 2016/12/29 15:38
字数 297
阅读 5
收藏 0
<%@ 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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/8187444

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这...

李玉珏
2015/04/23
0
0
怎样固定table的第一行,其他可以滚动

我把数据都放到了table中。现在是表头跟内容都是放到tr中的。表中的第一行就是表的标题,现在想固定第一行,而其他的内容可以用滚动条控制。(表里的内容会变的,不能固定表的宽度,用两个表...

pengjm1121
2013/01/25
4K
2
IE6 固定表头滚动条问题

我用这个方法给IE6用户表体加滚动条,但是在滚动条不再顶端的时候下面table增行 IE6下 表头也会跟着向上移位。求解决办法

那天早上
2012/07/31
326
1
jqgrid怎么固定表头

jqgrid插件生成的表格但一页数据过多时表头会随滚动条滚动看不见,怎么可以使表头固定在页面上

殿主l
2015/09/08
291
0
JTable水平滚动时表头与数据不一致的解决

JTable 设置setAutoResizeMode(JTable.AUTORESIZEOFF);时才能保证水平滚动条的存在, 但是仅有该设置,水平滚动时表头和表数据不能保持垂直对齐。 解决方法: 设置表头的preferredSize. this...

YuanyuanL
2015/07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android 事件分发

记录下对Android事件分发的理解: 如果a作为viewgroup,b作为view,b包含在a中。事件会先传递到viewgroup中,既a。然后a会进行事件分发给子view。事件分发的方法中,会有个判断,是否要分发给...

醉雨
28分钟前
0
0
今天的学习

今天学到了 get和post传参: Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示 Post传输的数据量大,理论上是无限大,而Get方法由于受到URL长度的限制,只能传递大约1024字节 ...

墨冥
33分钟前
0
0
输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径。路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径。

public class Solution { private ArrayList<ArrayList<Integer>> listAll = new ArrayList<ArrayList<Integer>>(); ArrayList<ArrayList<Integer>> all= new ArrayList<ArrayList<Integer>>......

南桥北木
35分钟前
1
0
使用lombok编写优雅的Bean对象

使用java编写代码,十之八九都是在写java类,从而构建java对象。lombok之前也说了不少,但使用了这么多年,感觉还是有很多技巧可以使用的。 毫无疑问,使用lombok,编写的java代码很优雅,而...

polly
36分钟前
1
0
表现与数据分离、web语义化的理解

表现与数据分离 什么是表现与数据分离? “分离”说的是两方面: 第一方面是前端与后台分离,所有数据都是后台通过AJAX发送给前端,前端处理数据展现页面,不需要后台在页面中插入变量。 第二...

祖达
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部