备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

关于ASP.NET 如何固定表格表头(fixed header) 【转载】

2017-11-15 1536
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

你在HTML中渲染一张表格(可能是GridView或者Repeater)，如果表格的行数太多，你就得向下拖东滚动条，但你一旦向下拖动滚动条，表头的信息就不见了。具体见下图。

wKioL1NQ5iXRL7qAAACz1XFQ38Y397.jpg

向下拖动滚动条后，表头信息消失：

wKiom1NQ5n6BmfUpAAChB8bXPOg008.jpg

在本文中，我向大家讲解如何固定住表头。网上可以搜索到很多种方法来实现这个功能，但这些方法基本的原理都是一样的。就是利用div，将表头的信息复制到表身之上的一个div中。


1
2
< div > 表头 </ div >
< div > 表身 </ div >

滚动条只在表身div中，这样拖动表身div就不会影响到表头的div了。

经过我的实验，有以下两个具体的方法比较好用，分别适用于ASP.NET的Repeater控件和GridView控件。

（一）用于Repeater控件：

webForm1.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head  runat = "server" >
     < title ></ title >
     < script  type = "text/javascript"  language = "javascript" >
         function FixTableHeader() {
             var t = document.getElementById("table");
             var thead = t.getElementsByTagName("thead")[0];
             var t1 = t.cloneNode(false);
             t1.appendChild(thead);
             document.getElementById("tableHeader").appendChild(t1)
         }
         window.onload = FixTableHeader;
     </ script >
</ head >
< body >
     < form  id = "form1"  runat = "server" >
     < div  id = "tableHeader" >
     </ div >
     < div  style = "overflow: scroll; height: 100px; width: 500px" >
         < table  id = "table"  width = "500"  style = "table-layout: fixed" >
             < thead >
                 < tr  id = "thead"  style = "background-color: #BEBEBE" >
                     < th >
                         Account Number
                     </ th >
                     < th >
                         Account Name
                     </ th >
                     < th >
                         City
                     </ th >
                     < th >
                         Country
                     </ th >
                 </ tr >
             </ thead >
             < tbody >
                 < asp:Repeater  ID = "Reapeter1"  runat = "server" >
                     < ItemTemplate >
                         < tr >
                             < td >
                                 <%#DataBinder.Eval(Container.DataItem, "AccountNumber")%>
                             </ td >
                             < td >
                                 <%#DataBinder.Eval(Container.DataItem, "AccountName")%>
                             </ td >
                             < td >
                                 <%#DataBinder.Eval(Container.DataItem,"City")%>
                             </ td >
                             < td >
                                 <%#DataBinder.Eval(Container.DataItem,"Country")%>
                             </ td >
                         </ tr >
                     </ ItemTemplate >
                 </ asp:Repeater >
             </ tbody >
         </ table >
     </ div >
     </ form >
</ body >
</ html >


注意，如果你想表头和表身的每一列都对齐的话，table的style="table-layout: fixed"不能少。

C#代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
using  System;
using  System.Web.UI;
using  System.Data;
namespace  WebApplication1
{
     public  partial  class  WebForm1 : System.Web.UI.Page
     {
         protected  void  Page_Load( object  sender, EventArgs e)
         {
             if  (!Page.IsPostBack)
             {
                 DataTable dt =  new  DataTable();
                 dt.Columns.Add( new  DataColumn( "AccountNumber" ));
                 dt.Columns.Add( new  DataColumn( "AccountName" ));                                 
                 dt.Columns.Add( new  DataColumn( "City" ));
                 dt.Columns.Add( new  DataColumn( "Country" ));
                 DataRow dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test1" ;
                 dr[ "AccountNumber" ] =  "001" ;
                 dr[ "Country" ] =  "China" ;
                 dr[ "City" ] =  "Beijing" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test2" ;
                 dr[ "AccountNumber" ] =  "002" ;
                 dr[ "Country" ] =  "China" ;
                 dr[ "City" ] =  "Shanghai" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test3" ;
                 dr[ "AccountNumber" ] =  "003" ;
                 dr[ "Country" ] =  "the Nederlands" ;
                 dr[ "City" ] =  "Amsterdam" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test4" ;
                 dr[ "AccountNumber" ] =  "004" ;
                 dr[ "Country" ] =  "France" ;
                 dr[ "City" ] =  "Paris" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test5" ;
                 dr[ "AccountNumber" ] =  "005" ;
                 dr[ "Country" ] =  "Spain" ;
                 dr[ "City" ] =  "Barcelona" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test6" ;
                 dr[ "AccountNumber" ] =  "006" ;
                 dr[ "Country" ] =  "China" ;
                 dr[ "City" ] =  "Shanghai" ;
                 dt.Rows.Add(dr);
                 Reapeter1.DataSource = dt;
                 Reapeter1.DataBind();
             }
         }
     }
}

最后的效果为：

wKiom1NQ6YPQ8J3PAADDGG0B-QU246.jpg

wKioL1NQ6VqQZW3vAADRAg4Mm3A953.jpg

（二） 用于GridView控件：

WebForm2.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head  id = "Head1"  runat = "server" >
     < title ></ title >
     < script  src = "Scripts/jquery-1.4.1.min.js"  type = "text/javascript" ></ script >
     < script  src = "Scripts/ScrollableGridPlugin.js"  type = "text/javascript" ></ script >
     < script  type = "text/javascript" >
         $(document).ready(function () {
             $('#<%=GridView1.ClientID %>').Scrollable({
                 ScrollHeight: 100,
                 Width: 500
             });
         });
     </ script >
</ head >
< body >
     < form  id = "form1"  runat = "server" >
     < div >
         < asp:GridView  runat = "server"  ID = "GridView1"  AutoGenerateColumns = "false"  Width = "500px" >
             < RowStyle  BackColor = "#EFF3FB"  />
             < FooterStyle  BackColor = "#507CD1"  Font-Bold = "True"  ForeColor = "White"  />
             < PagerStyle  BackColor = "#2461BF"  ForeColor = "White"  HorizontalAlign = "Center"  />
             < HeaderStyle  BackColor = "#507CD1"  Font-Bold = "True"  ForeColor = "White"  />
             < AlternatingRowStyle  BackColor = "White"  />
             < Columns >              
                 < asp:BoundField  DataField = "AccountNumber"  HeaderText = "Account Number" >                  
                 </ asp:BoundField >
                 < asp:BoundField  DataField = "AccountName"  HeaderText = "Account Name" >                                  
                 </ asp:BoundField >
                 < asp:BoundField  DataField = "City"  HeaderText = "City"  >              
                 </ asp:BoundField >
                 < asp:BoundField  DataField = "Country"  HeaderText = "Country" >              
                 </ asp:BoundField >
             </ Columns >
         </ asp:GridView >
     </ div >
     </ form >
</ body >
</ html >

这里主要用到了JQuery和ScrollableGridPlugin.js插件。ScrollableGridPlugin.js插件很好用，想要哪个GridView固定住表头，只需要在开始的Script中加入以下的代码。第一个参数用来设置表的高度，第二个设置表宽，单位都为px。这两个参数也可以省略，ScrollableGridPlugin.js中会设置默认值。

1
2
3
4
5
6
$(document).ready( function  () {
     $( '#<%=GridView1.ClientID %>' ).Scrollable({
         ScrollHeight: 100,
         Width: 500
     });
});

ScrollableGridPlugin.js的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
( function  ($) {
     $.fn.Scrollable =  function  (options) {
         var  defaults = {
             ScrollHeight: 300,
             Width: 0
         };
         var  options = $.extend(defaults, options);
         return  this .each( function  () {
             var  grid = $( this ).get(0);
             var  gridWidth = grid.offsetWidth;
             var  gridHeight = grid.offsetHeight;
             var  headerCellWidths =  new  Array();
             for  ( var  i = 0; i < grid.getElementsByTagName( "TH" ).length; i++) {
                 headerCellWidths[i] = grid.getElementsByTagName( "TH" )[i].offsetWidth;
             }
             grid.parentNode.appendChild(document.createElement( "div" ));
             var  parentDiv = grid.parentNode;
             var  table = document.createElement( "table" );
             for  (i = 0; i < grid.attributes.length; i++) {
                 if  (grid.attributes[i].specified && grid.attributes[i].name !=  "id" ) {
                     table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                 }
             }
             table.style.cssText = grid.style.cssText;
             table.style.width = gridWidth +  "px" ;
             table.appendChild(document.createElement( "tbody" ));
             table.getElementsByTagName( "tbody" )[0].appendChild(grid.getElementsByTagName( "TR" )[0]);
             var  cells = table.getElementsByTagName( "TH" );
             var  gridRow = grid.getElementsByTagName( "TR" )[0];
             for  ( var  i = 0; i < cells.length; i++) {
                 var  width;
                 if  (headerCellWidths[i] > gridRow.getElementsByTagName( "TD" )[i].offsetWidth) {
                     width = headerCellWidths[i];
                 }
                 else  {
                     width = gridRow.getElementsByTagName( "TD" )[i].offsetWidth;
                 }
                 cells[i].style.width = parseInt(width - 3) +  "px" ;
                 gridRow.getElementsByTagName( "TD" )[i].style.width = parseInt(width - 3) +  "px" ;
             }
             parentDiv.removeChild(grid);
             var  dummyHeader = document.createElement( "div" );
             dummyHeader.appendChild(table);
             parentDiv.appendChild(dummyHeader);
             if  (options.Width > 0) {
                 gridWidth = options.Width;
             }
             var  scrollableDiv = document.createElement( "div" );
             if  (parseInt(gridHeight) > options.ScrollHeight) {
                 gridWidth = parseInt(gridWidth) + 17;
             }
             scrollableDiv.style.cssText =  "overflow:auto;height:"  + options.ScrollHeight +  "px;width:"  + gridWidth +  "px" ;
             scrollableDiv.appendChild(grid);
             parentDiv.appendChild(scrollableDiv);
         });
     };
})(jQuery);

C#的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
using  System;
using  System.Web.UI;
using  System.Data;
namespace  WebApplication1
{
     public  partial  class  WebForm2 : System.Web.UI.Page
     {
         protected  void  Page_Load( object  sender, EventArgs e)
         {
             if  (!Page.IsPostBack)
             {
                 DataTable dt =  new  DataTable();
                 dt.Columns.Add( new  DataColumn( "AccountNumber" ));
                 dt.Columns.Add( new  DataColumn( "AccountName" ));
                 dt.Columns.Add( new  DataColumn( "City" ));
                 dt.Columns.Add( new  DataColumn( "Country" ));
                 DataRow dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test1" ;
                 dr[ "AccountNumber" ] =  "001" ;
                 dr[ "Country" ] =  "China" ;
                 dr[ "City" ] =  "Beijing" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test2" ;
                 dr[ "AccountNumber" ] =  "002" ;
                 dr[ "Country" ] =  "China" ;
                 dr[ "City" ] =  "Shanghai" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test3" ;
                 dr[ "AccountNumber" ] =  "003" ;
                 dr[ "Country" ] =  "the Nederlands" ;
                 dr[ "City" ] =  "Amsterdam" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test4" ;
                 dr[ "AccountNumber" ] =  "004" ;
                 dr[ "Country" ] =  "France" ;
                 dr[ "City" ] =  "Paris" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test5" ;
                 dr[ "AccountNumber" ] =  "005" ;
                 dr[ "Country" ] =  "Spain" ;
                 dr[ "City" ] =  "Barcelona" ;
                 dt.Rows.Add(dr);
                 dr = dt.NewRow();
                 dr[ "AccountName" ] =  "Test6" ;
                 dr[ "AccountNumber" ] =  "006" ;
                 dr[ "Country" ] =  "China" ;
                 dr[ "City" ] =  "Shanghai" ;
                 dt.Rows.Add(dr);
                 GridView1.DataSource = dt;
                 GridView1.DataBind();
             }
         }
     }
}










本文转自 我不会抽烟 51CTO博客，原文链接：http://blog.51cto.com/zhouhongyu1989/1398017，如需转载请自行联系原作者

文章标签：
JavaScript
C#
.NET
前端开发
关键词：
.NET表头
ASP.NET表格
ASP.NET表头
.NET表格表头
余二五
目录
相关文章
rdiframework
NET快速信息化系统开发框架 V3.2 -“用户管理”主界面使用多表头展示、增加打印功能
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/79013549 　　RDIFrameowrk.NET 用户管理是使用非常频繁的模块，由于需要展示的字段比较多，以前的展示方式显得不是太规范，现3.2版本用户管理主界面进行了全新的设计，数据列表展示使用了Dev家族全新的GridControl控件。
rdiframework
1348 0
范大脚脚
|
前端开发 .NET
【译】在Asp.Net中操作PDF – iTextSharp - 使用表格
范大脚脚
1504 0
老朱教授
|
前端开发 .NET atlas
在 ASP.NET 上实现锁定表头、支持滚动的表格的做法
老朱教授
1483 0
橘子红了呐
|
.NET C# 开发框架
ASP.NET 2.0中合并 GridView 的表头单元格(转)
橘子红了呐
1324 0
浣熊干面包
|
开发框架 .NET
.NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤
浣熊干面包
2454 0
技术小胖子
|
JavaScript .NET
ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑
技术小胖子
1164 0
吞吞吐吐的
|
.NET C#
Asp.net(C#)动态生成表格中的按钮和事件响应
吞吞吐吐的
1460 0
暖枫无敌
|
.NET
asp.net table表格表头及列固定实现
在开发中常会遇到table表格中列特别多，下拉后，表头就看不见了，水平滚动后，第1、2列就看不见了，于是需求就出来了，就是需要固定table的表头和列。
暖枫无敌
1367 0
华山青竹
|
.NET 索引 开发框架
【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
下文所有内容转自开源中国：http://www.oschina.net/question/565065_86453#tags_nav ============================================================================= ASP.
华山青竹
1048 0
亚丁号
|
4月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
亚丁号
44 0

热门文章

最新文章

  • 1
    C#/.NET/.NET Core优秀项目和框架2024年3月简报
  • 2
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
  • 3
    【干货】Java开发者快速上手.NET指南
  • 4
    .NET开源免费、功能强大的 Windows 截图录屏神器
  • 5
    对象存储oss使用问题之OSS SDK .net 使用下载例程报错如何解决
  • 6
    .NET开源、免费、强大的交互式绘图库
  • 7
    .NET开源免费的Windows快速文件搜索和应用程序启动器
  • 8
    .NET开源快速、强大、免费的电子表格组件
  • 9
    .NET开源、免费、跨平台的Git可视化管理工具
  • 10
    ASP.NET三甲医院手术麻醉信息管理系统源码 对接麻醉机、监护仪、血气分析仪
  • 1
    .NET Aspire Preview 4 发布！
    73
  • 2
    ASP.NET体检中心源码，实现检前、检中、检后全流程管理
    36
  • 3
    .NET开源的两款第三方登录整合库
    22
  • 4
    C#/.NET/.NET Core拾遗补漏合集（持续更新）
    15
  • 5
    windows server 2019 安装NET Framework 3.5失败，提示：“安装一个或多个角色、角色服务或功能失败” 解决方案
    171
  • 6
    C# .NET面试系列十一：数据库SQL查询（附建表语句）
    68
  • 7
    933.【开发工具】解决idea：Caused by: java.net.BindException: Add
    23
  • 8
    .NET生成MongoDB中的主键ObjectId
    61
  • 9
    企业应用开发中.NET EF常用哪种模式？
    54
  • 10
    C# .NET面试系列九：常见的算法
    60

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考