我正在尝试使用固定标头设置GridView。我可以这样做，但是，一旦我将PagerTemplate添加到页面顶部，我的标题就不再固定到位了。如果我省略了PagerTemplate或将其放在底部，那么一切都按预期工作。下面是我的代码，顶部的PagerTemplate是我想要的，所以标题不是固定的垂直滚动。任何帮助表示赞赏：
<!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">
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
.GridViewStyle
{
background-color:White;
}
.GridViewHeaderStyle
{
color:White;
background-color:Black;
}
</style>
<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 = '5000px';
//********** 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 = 'bold';
//******** 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>
<form id="form1" runat="server">
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow:auto; width:100%; height:500px;" onscroll="Onscrollfnction();">
<asp:GridView ID="GridView1" runat="server"
DataSourceID="SqlDS1" BackColor="White"
OnDataBound="GridView1_DataBound" AllowPaging="True"
AllowSorting="True" PageSize="1000" OnPreRender="GridView_PreRender"
CssClass="GridViewStyle" onrowdatabound="GridView1_RowDataBound">
<PagerSettings Position="Top" />
<PagerTemplate>
<div>
<asp:DropDownList ID="PagingDropDownList" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="PagingDropDownList_SelectedIndexChanged" height="30px" />
</div>
</PagerTemplate>
<HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDS1" runat="server"
ConnectionString="<%$ ConnectionStrings:TTN-CSS-01ConnectionString %>"
SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</div>
</div>
</form>
</body>
</html>
修改 再看一下，看起来问题是，当构造表时，如果在Top上使用了PagerTemplate，那么javascript生成的新表将使用它作为顶行，所以如果我没有弄错的话，分页行是冻结的（尽管我已将它作为固定位置）。我只是不确定如何解决这个问题。加载页面并查看源代码后，这就是我所看到的内容。
PagerTemplate on Top（不工作）
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow:auto; width: 100%; height: 500px;" onscroll="Onscrollfnction();">
<div>
<table class="GridViewStyle" cellspacing="0" rules="all" border="1" id="GridView1" style="background-color:White;border-collapse:collapse;">
<tr>
<td colspan="16">
<div class="pages">
<select name="GridView1$ctl01$PagingDropDownList" onchange="javascript:setTimeout('__doPostBack(\'GridView1$ctl01$PagingDropDownList\',\'\')', 0)" id="GridView1_ctl01_PagingDropDownList" style="height:30px;">
<option selected="selected" value="1">1</option>
</select>
</div>
</td>
</tr>
<tr style="color:White;background-color:#DF1E37;">
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Col1')" style="color:White;">Col1</a>
PagerTemplate on Bottom或off（working）
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow:auto; width: 100%; height: 500px;" onscroll="Onscrollfnction();">
<div>
<table class="GridViewStyle" cellspacing="0" rules="all" border="1" id="ReportsGridView" style="background-color:White;border-collapse:collapse;">
<tr style="color:White;background-color:#DF1E37;">
<th scope="col"><a href="javascript:__doPostBack('ReportsGridView','Sort$Col1')" style="color:White;">Col1</a></th>
答案 0 :(得分：0)
我无法找到一种方法将PagerTemplate置于GridView之外而无需编写大量代码，所以我最终要做的是使用GridViewScroll with jQuery而不是我试图使用的javascript。使用jQuery选项，我可以指定应该冻结多少行，因此选择2会冻结PagerTemplate以及我的标题行。
有一个SO链接，有人解释他们如何实现它，这与我在这种情况下所做的类似。