首页 > 代码库 > ASP.NET 如何固定表格表头(fixed header)
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="http://www.mamicode.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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
ASP.NET 如何固定表格表头(fixed header)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。