你在HTML中渲染一张表格(可能是GridView或者Repeater),如果表格的行数太多,你就得向下拖东滚动条,但你一旦向下拖动滚动条,表头的信息就不见了。具体见下图。
向下拖动滚动条后,表头信息消失:
在本文中,我向大家讲解如何固定住表头。网上可以搜索到很多种方法来实现这个功能,但这些方法基本的原理都是一样的。就是利用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();
}
}
}
}
|
最后的效果为:
(二) 用于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,如需转载请自行联系原作者