我想修复我的gridview标题位置，以便在垂直滚动列时必须看到标题。我尝试了多种解决方案，但没有一种方法适合我。 以下是在asp.net中修复gridview标题最常用的代码 请解决我的问题，为什么它不工作
<style type="text/css">
.WrapperDiv
{
width:560px;height:290px;border: 1px solid black;
}
.WrapperDiv TH
{
/* Needed for IE */
position: relative;
}
.WrapperDiv TR
{
/* Needed for IE */
height:0px;
}
</style>
<script type="text/ecmascript">
var headerHeight = 8;
freezeGridViewHeaderForIEAndFF('GridView2', 'WrapperDiv');
function freezeGridViewHeaderForIEAndFF(gridViewId, wrapperDivCssClass) {
debugger;
var grid = document.getElementById(gridViewId);
if (grid) {
if (grid.style && grid.style.visibility)
grid.style.visibility = 'hidden';
if (grid.parentNode) {
//Find wrapper div output by GridView
var div = grid.parentNode;
if (div.tagName == "div1") {
div.className = wrapperDivCssClass;
div.style.overflow = "auto";
}
}
var grid = prepareFixedHeader(grid);
var tbody = grid.getElementsByTagName('TBODY')[0];
//Needed for Firefox
tbody.style.height = (div1.offsetHeight - headerHeight) + 'px';
tbody.style.overflowX = "hidden";
tbody.overflow = 'auto';
tbody.overflowX = 'hidden';
grid.style.visibility = 'visible';
}
}
function prepareFixedHeader(grid) {
//Find DOM TBODY element and and
var tags = grid.getElementsByTagName('TBODY');
if (tags != 'undefined') {
var tbody = tags[0];
var trs = tbody.getElementsByTagName('TR');
if (trs != 'undefined') {
headerHeight += trs[0].offsetHeight;
//Remove first TR tag from it
var headTR = tbody.removeChild(trs[0]);
//create a new element called THEAD
var head = document.createElement('THEAD');
head.appendChild(headTR);
//add to a THEAD element instead of TR so CSS styles
//can be applied properly in both IE and FireFox
grid.insertBefore(head, grid.firstChild);
}
}
return grid;
}
</script>
<div id="div1"style="overflow-x:hidden;overflow-y:auto;height:400px">
<table>
<asp:GridView ID="GridView2" style="table-layout:fixed;" Width="1000px" AutoGenerateColumns ="False" AllowSorting="true" runat="server"
CellPadding="4" ForeColor="#333333"
GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Assembly" HeaderStyle-Font-Size="Small" >
<ItemTemplate >
<asp:label ID="label23" Font-Size="small" ToolTip ="click to see assembly page" runat="server" Text='<%# bind("AsbCd") %>' >
</asp:label>
</ItemTemplate>
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="AssemblyName" HeaderStyle-Font-Size="small" >
<ItemTemplate>
<asp:label ID="label24" Font-Size="Small" ToolTip ="click to see assembly page" runat="server" Text='<%# bind("AsbNm") %>' >
</asp:label>
</ItemTemplate>
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField HeaderText="Source" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="left"/>
</asp:BoundField>
<asp:BoundField HeaderText="Operators" DataField="operators" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="left"/>
</asp:BoundField>
<asp:BoundField HeaderText="Hours" DataField="Days" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right"/>
</asp:BoundField>
<asp:BoundField DataField="PlannedDt" HeaderText="Start Date" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"
DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
<asp:BoundField DataField="PlancedEnddt" HeaderText="End Date" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"
DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right"/>
</asp:BoundField>
<asp:BoundField DataField="Operator" HeaderText="Operator" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="left"/>
</asp:BoundField>
<asp:BoundField DataField="ActualDays" HeaderText="Hours" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
<asp:BoundField DataField="ActualStartDt" HeaderText="Start Date " ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"
DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
<asp:BoundField DataField="ActualEndDt" HeaderText="End Date" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell "
DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
<asp:BoundField DataField="IssuePending" HeaderText="Shortfall" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell " >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
<asp:BoundField DataField="rack" HeaderText="Rack" ItemStyle-Font-Size="Small" HeaderStyle-Font-size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
<asp:BoundField DataField="Remark" HeaderText="Remark" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" >
<HeaderStyle BorderStyle="Outset" />
<ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
</asp:BoundField>
</Columns>
</asp:GridView>
</table>
</div>
答案 0 :(得分：1)
您可以尝试将标题与内容分开，并将标题放在可滚动内容之外。
<div>Some Page Content </div>
//your heading goes here
<div style="max-height: 400px; overflow: auto;">
//your gridview goes here
</div>
<div>Some Page Content </div>
<div style="float: left; width: 100%;">
<table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
width: 100%;">
<tr style="background-color: #E5E5FE">
<th style="width: 15%;">
Order
</th>
<th style="width: 15%;">
Column Title
</th>
<th style="width: 15%;">
DataType
</th>
</tr>
</table>
</div>
<div style="max-height: 200px; overflow: auto; float: left; width: 100%;">
<asp:GridView ID="GridView2" Style="table-layout: fixed;" Width="100%" AutoGenerateColumns="false"
AllowSorting="true" runat="server" CellPadding="4" ForeColor="#333333" GridLines="both" ShowHeader="False">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text='Teste'>
</asp:Label>
</ItemTemplate>
<ItemStyle Width="15%" />
</asp:TemplateField>
<asp:TemplateField >
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text='Teste'>
</asp:Label>
</ItemTemplate>
<ItemStyle Width="15%" />
</asp:TemplateField>
<asp:TemplateField >
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text='Teste'>
</asp:Label>
</ItemTemplate>
<ItemStyle Width="15%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
答案 1 :(得分：0)
这是js版本。但在链接中，标题的宽度以像素为单位。因此，随着页面缩小，它不会缩小。
http://www.codeproject.com/Articles/61775/Grid-View-with-Fixed-Header