我正在尝试为我的gridview实现冻结/修复标题窗格。 gridview工作正常，将其呈现在此解决方案中。当此页面首次呈现时，页面看起来很完美。但是，当我尝试滚动信息时，背景颜色标题栏会与其余数据一起向上滚动。唯一被冻结的是gridview的文本标题，但是当gridview滚动时背景是透明的。
我已经包含了此页面的重要数据。但是，如果需要在下面的代码中添加更多信息，请告诉我们。我试图添加/调整javascript，css，gridview和C＃设置，没有运气。我很难过。
注意：这适用于IE 9。
页面模板信息......
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Cosmetic.Wrapper.cs" Inherits="Cosmetic_Wrapper" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
(other nonessential header garbage - If you really need this let me know)
<asp:ContentPlaceHolder runat="server" ID="Header"
<script src="path/to/jquery-2.0.3.min.js"></script>
<script src="path/to/jquery-2.0.3.js"></script>
<script language="javascript" type="text/javascript">
function CreateGridHeader(DataDiv, GridView1, HeaderDiv) {
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(GridView1);
var HeaderDivObj = document.getElementById(HeaderDiv);
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '50000px';
DataDivObj.style.width = '#507CD1';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'normal';
//******** This loop will create each header cell *********
for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length; iCntr++) {
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
width = spanTag.clientWidth;
}
else {
width = DataGridObj.rows[1].cells[iCntr].clientWidth;
}
if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
spanTag.style.width = width + 'px';
}
else {
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
}
var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[0].style.display = 'none';
//********* Setting the same width of all the componets **********
HeaderDivObj.style.width = DataDivWidth + 'px';
DataDivObj.style.width = DataDivWidth + 'px';
DataGridObj.style.width = tableWidth + 'px';
HeadertableObj.style.width = tableWidth + 20 + 'px';
return false;
}
function Onscrollfnction() {
var div = document.getElementById('DataDiv');
var div2 = document.getElementById('HeaderDiv');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
return false;
}
</script>
</head>
<body>
(Insert top portion of page cosmetics here)
<asp:ScriptManager runat="server">
<Path>
<%--To learn more about bundling Path in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Path--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Path/To/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Path/To/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Path/To/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Path/To/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Path/To/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Path/To/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Path/To/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Path/To/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Path--%>
</Path>
</asp:ScriptManager>
<header>
(More page cosmetics)
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedInfo" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainBody" />
</section>
</div>
<footer>
(nonessential footer info)
</footer>
</form>
</body>
</html>
ASP页面
<%@ Page Title="ASP Page" Language="C#" MasterPageFile="~/Cosmetic.Wrapper" AutoEventWireup="true" CodeFile="asp-page.aspx.cs" Inherits="asp_page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedInfo" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainBody" Runat="Server">
<style type="text/css">
.GridViewStyle
{
font-family:Verdana;
font-size:11px;
background-color: White;
}
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
position:fixed;
background-color:#507CD1;
color:black;
height:40px;
}
</style>
<%--Insert SQL Datasource info here --%>
<div>
<%--Div contains the new header of the GridView--%>
<div id="HeaderDiv">
</div>
<%--Wrapper Div which will scroll the GridView--%>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 2000px; height: 300px;" onscroll="Onscrollfnction();">
<asp:GridView ID="GridView1" runat="server" AllowSorting="True" HeaderStyle-CssClass="GridViewHeaderStyle" AutoGenerateColumns="False" DataKeyNames="line" DataSourceID="SqlConn1" ForeColor="#333333" GridLines="None">
<columns>
Place Bound/TemplateFields here
</columns>
<insert gridview cosmetic info here - if needed please let me know>
</gridview>
</div>
</div>
</asp:Content>
C＃代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Data.OleDb;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class asp_page : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv', 'GridView1', 'HeaderDiv');</script>");
}
}
protected void cmdClick_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv', 'GridView1', 'HeaderDiv');</script>");
}
}
更新 - 2月27日 - 太平洋标准时间10点16分
这是在将其输入空白HTML页面时呈现的代码。在此示例中，根本没有使用C＃页面。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="path/to/jquery-2.0.3.min.js"></script>
<script src="path/to/jquery-2.0.3.js"></script>
</head>
<body>
<form method="post" action="test.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Insert Millions of random characters here" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
</div>
<div>
<script type="text/javascript">
$(function () {
var header = $("#GridView1").find("tr")[0];
$("#HeaderDiv").append(header);
});
</script>
<style type="text/css">
.GridViewStyle
{
font-family:Verdana;
font-size:11px;
background-color: White;
}
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
background-color:#507CD1;
color:black;
height:40px;
}
</style>
<br />
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 2000px; height: 300px;" onscroll="Onscrollfnction();">
<div>
<table cellspacing="0" id="GridView1" style="color:#333333;border-collapse:collapse;">
<tr class="GridViewHeaderStyle">
<th scope="col"> </th><th class="GridViewHeaderStyle" scope="col" style="background-color:#507CD1;"><a href="javascript:__doPostBack('GridView1','Sort$Column1')" style="color:#333333;"Column1*</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column2')" style="color:#333333;">Column2</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column3')" style="color:#333333;">Column3</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column4')" style="color:#333333;">Column4</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column5')" style="color:#333333;">Column5</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column6')" style="color:#333333;">Column6</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column7')" style="color:#333333;">Column7</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column8')" style="color:#333333;">Column8</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column9')" style="color:#333333;">Column9</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column10')" style="color:#333333;">Column10</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column11')" style="color:#333333;">Column11</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column12')" style="color:#333333;">Column12</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column13')" style="color:#333333;">Column13</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column14')" style="color:#333333;">Column14</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column15')" style="color:#333333;">Column15</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column16')" style="color:#333333;">Column16</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column17')" style="color:#333333;">Column 17</a></th><th scope="col">> </th>
</tr><tr style="background-color:#EFF3FB;">
<td><a href="javascript:__doPostBack('GridView1','Edit$0')" style="color:#333333;">Edit</a></td><td>Blah</td><td>Blah</td><td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </td><td>Blah </td><td>Blah </td><td>Blah </td><td> </td><td>Blah </td><td>
<span id="GridView1_Label2_0">Blah </span>
</td><td>Blah </td><td>
<span id="GridView1_Label3_0">Blah </span>
</td><td>
<span id="GridView1_Label4_0">Blah </span>
</td><td>Blah </td><td>
<span id="GridView1_Label1_0">Blah </span>
</td><td>
<span id="GridView1_Label5_0">Blah </span>
</td><td>Blah </td><td>Blah </td><td> </td><td>
<span id="GridView1_Label6_0">Blah</span>
</td><td><a href="javascript:__doPostBack('GridView1','Edit$0')" style="color:#333333;">Blah </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
答案 0 :(得分：4)
您的CreateGridHeader函数中有一行将所需的背景颜色应用于DataDivObj
DataDivObj.style.width = '50000px';
DataDivObj.style.width = '#507CD1';
这与标题
使用的背景颜色相同.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
position:fixed;
background-color:#507CD1;
color:black;
height:40px;
}
这里必须有连接。我认为您可以通过将第二个style.width更改为style.backgroundColor
<强>更新
我现在看到DataDiv是一个固定的高度，溢出：auto。我以前错过了这个。所以你实际上并不需要实现滚动功能。
<script type="text/javascript">
$(function () {
var header = $("#GridView1").find("tr")[0];
$("#HeaderDiv").append($("<table id='floatingheader'>").append(header));
});
</script>
这使它保持在固定高度div http://jsfiddle.net/QLWn2/
内答案 1 :(得分：2)
注册脚本时，您需要将'GridView1'替换为'" + GridView1.ClientID + "'。您的方法应如下所示：
protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv','" + GridView1.ClientID + "', 'HeaderDiv');</script>");
}
}
protected void cmdClick_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv','" + GridView1.ClientID + "', 'HeaderDiv');</script>");
}
<强>解释
根据您提供的代码，GridView1将呈现为MainContent_GridView1。这将导致此行中出现javascript错误：
Row.className = DataGridObj.rows[0].className;
因此，不会为新标题行分配类名。因此，不会应用任何样式。
答案 2 :(得分：1)
您有两个标头，因为您的javascript代码会复制GridView的标头，而不会删除它。创建新标题后，您需要从GridView中删除原始标题行。
如果我创建一个带有GridView和一些示例列的空项目，使用您提供的样式并且没有javascript，则固定标头可以正常工作。当我向上和向下滚动页面时，标题会保留在应有的位置。如果这就是你想要的，那么删除javascript，一切都会工作。
然而，我感觉你真正想要的是标题仅在用户滚过GridView时滚动。也就是说，它应该保留在GridView上，直到浏览器窗口的顶部与GridView的顶部齐平，然后它应该冻结。
这在jQuery中非常容易，您已经在页面顶部加载了jQuery。这就是你做的事情
CSS
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
background-color:#507CD1;
color:black;
height:40px;
}
.floating{
position:fixed;
top: 40px; /* when floated, we need to add the height of the header to its position , as we will have scrolled past it already. */
}
.padded{
margin-top: 40px; /* once the header position is fixed, the gridview will jump up by 40px, so we need to add this class to make sure it stays put */
}
Javascript：
<script type="text/javascript">
var floating = false;
$(function () {
// setup
// move the header to its own table. simple!
var header = $("#<%= GridView1.ClientID %>").find("tr")[0];
$("#<%= GridView1.ClientID %>").before($("<table id='floatingheader'>").append(header));
// when scrolling...
$(document).scroll(function () {
// get position of gridview.
var gridposition = $("#<%= GridView1.ClientID %>").offset().top;
// get scroll height
var scrollheight = $(document).scrollTop();
if(!floating && scrollheight > gridposition){
$("#floatingheader").addClass("floating"); // float the header
$("#<%= GridView1.ClientID %>").addClass("padded"); // move the gridview down 40px
floating = true; // set floating flag to true
}
if(floating && scrollheight < gridposition){
$("#floatingheader").removeClass("floating"); // remove floating class
$("#<%= GridView1.ClientID %>").removeClass("padded"); // remove padding
floating = false; // set flag to false
}
});
});
</script>
这将在GridView上创建一个浮动标题。请注意，如果页面顶部有任何浮动菜单，您也需要考虑这些菜单。