0
我想設置一個帶有固定標題的GridView。我可以做到這一點，但是，一旦我將PagerTemplate添加到頁面的頂部，我的標題就不再固定。如果我省略了PagerTemplate或將其放在底部，那麼一切都按預期工作。以下是我的代碼，其中的PagerTemplate位於頂部，我如何使用它，所以標題不適用於垂直滾動。任何幫助表示讚賞：GridView與凍結標題和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>
編輯： 展望這多一點，它看起來像問題是，當表的構造，如果有PagerTemplate在最前面使用，則所產生的新表如果我沒有弄錯，分頁行就是被凍結的那一行（儘管我已經把它作爲一個固定的位置）。我只是不知道如何去解決這個問題。加載頁面並查看源代碼後，我看到了這些內容。
PagerTemplate在最前（不工作）的底部或關閉
<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（工作）
<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>