ASP.NET 如何固定表格表头(fixed header)

[摘要]本文介绍ASP.NET 如何固定表格表头(fixed header)，并提供详细的示例代码供参考。

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

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

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

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

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

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

（一）用于Repeater控件：

webForm1.aspx

<%@ 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#代码：

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

<%@ 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 $(document).ready(function () {
2 $(‘#<%=GridView1.ClientID %>‘).Scrollable({
3 ScrollHeight: 100,
4 Width: 500
5 });
6 });

ScrollableGridPlugin.js的代码为：

(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#的代码为：

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();
            }
        }
    }
}

本文转自：http://dotnet.9sssd.com/aspnet/art/806
时间： 2024-10-25 19:30:45

ASP.NET 如何固定表格表头(fixed header)的相关文章

纯Css固定表格表头，表头与表格对齐

//控制表格滑动 table tbody { display:block; height:450px; overflow-y:scroll; } //固定表头 table thead, tbody tr { display:table; width:100%; table-layout:fixed; } //调节表头宽度 table thead { background-color:#f5f5f5; width: calc( 100% - 1.25em ); } 如果出现表头与下面表格没有对齐,

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度

效果:可鼠标拖动td,动态修改它们的宽度 html: <html> <head> <title>table拖动(兼容Firefox 3.5/IE6),固定表格宽度</title> <meta content="charset=utf-8"> <link rel="stylesheet" href="css/22.css" /> </head> <body&g

固定table表头

项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏览器没有做太多测试,但是在ie9.火狐.360浏览器中已测试通过. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Mina、Netty、Twisted一起学习（三）：TCP前缀固定大小的消息(Header)

于以前的博文于,有介绍切割消息换行的方法. 但是有一个小问题,这样的方法,设消息中本身就包括换行符,那将会将这条消息切割成两条.结果就不正确了. 本文介绍第二种消息切割方式,即上一篇博文中讲的第2条:use a fixed length header that indicates the length of the body.用一个固定字节数的Header前缀来指定Body的字节数,以此来切割消息. 上面图中Header固定为4字节,Header中保存的是一个4字节(32位)的整数,比如12即为

Mina、Netty、Twisted一起学（三）：TCP消息固定大小的前缀(Header)

在上一篇博文中,有介绍到用换行符分割消息的方法.但是这种方法有个小问题,如果消息中本身就包含换行符,那将会将这条消息分割成两条,结果就不对了. 本文介绍另外一种消息分割方式,即上一篇博文中讲的第2条:use a fixed length header that indicates the length of the body,用一个固定字节数的Header前缀来指定Body的字节数,以此来分割消息. 上面图中Header固定为4字节,Header中保存的是一个4字节(32位)的整数,例如12即为

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

第一步:需要引用org.in2bits.MyXls程序集到使用页面 第二步:前台代码 <asp:Button ID="LeadingOut" runat="server" Text="导出"  onclick="LeadingOut_Click" /> 第三步:在aspx文件的后台写按钮的点击事件 protected void LeadingOut_Click(object sender, EventArgs e)

怎样固定Excel表头

许多人在打印表格时会遇到这个问题,如果数据多了,第一页有表头,翻页后就没有了,非常烦恼,那么怎么固定表头呢?其实很简单. 1.选中你要固定的表头的下面一行,例如:要固定前两行,点击第3行 2.选中后,点击"窗口"选择"冻结窗格". 3.这样就OK了,是不是很简单?快动手试试吧! 注意事项:不要选错行!记住是选中表头的下面一行来固定!,固定竖列的方法也与此类似,大家不妨尝试一下.

Asp.net中固定位数用零补齐的函数（已解决，示例）！

在开发当中,出现编号实现8位数,但需要用0补齐.如:123,表示:0000123. 实例如下: decimal aaa = 123; // 数值型 string bbb = aaa.ToString(); // 转换为字符 bbb = bbb.PadLeft(7, '0'); // 共7位,之前用0补齐 response.write(bbb ); decimal aaa = 123;    // 数值型 string bbb =  aaa.ToString();   // 转换为字符 bbb =

table表格表头类别分组效果

table表格表头类别分组效果:表格用来组织数据非常的便利,比如可以按照数据的类别进行或者其他方式有效的组织数据,有时候分类比较复杂,比如大的分类中还包括小的分类,下面就是一段类似的代码实例,希望能够对需要的朋友带来帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http