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

简介:

你在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,如需转载请自行联系原作者

目录
相关文章
NET快速信息化系统开发框架 V3.2 -“用户管理”主界面使用多表头展示、增加打印功能
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/79013549   RDIFrameowrk.NET 用户管理是使用非常频繁的模块,由于需要展示的字段比较多,以前的展示方式显得不是太规范,现3.2版本用户管理主界面进行了全新的设计,数据列表展示使用了Dev家族全新的GridControl控件。
1353 0
|
.NET
asp.net table表格表头及列固定实现
在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1、2列就看不见了,于是需求就出来了,就是需要固定table的表头和列。
1374 0
|
.NET 索引 开发框架
【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ============================================================================= ASP.
1053 0
|
1月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
91 0