c# – Gridview冻结/固定标题在滚动时丢失背景颜色
发布时间：2020-12-16 02:00:02 所属栏目：百科 来源：网络整理
导读：我正在尝试为我的gridview实现冻结/固定标题窗格. gridview工作正常,将其呈现在此解决方案中.当此页面首次呈现时,页面看起来很完美.但是,当我尝试滚动信息时,背景颜色标题栏会与其余数据一起向上滚动.唯一被冻结的是gridview的文本标题,但是当gridview滚动时
|
我正在尝试为我的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(),'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>
解决方法
您的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来解决这个问题 UPDATE 我现在看到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/内 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |