在gridview中冻结标题期间正确设置标题宽度和列
Posted
技术标签:
【中文标题】在gridview中冻结标题期间正确设置标题宽度和列【英文标题】：Set header width and column properly during freeze the header in gridview 【发布时间】：2014-09-30 10:52:15 【问题描述】：我想要一个带有固定标题的网格视图。我试过这个link 和this
我一直都可以这样做，但是网格标题宽度和列宽度设置不均存在问题。所以它看起来不太好，但滚动和冻结确实可以正常工作。如果我不使用冻结逻辑，那么标题宽度会显示正确。
当我观察代码并与我的代码进行比较时，我发现他们过去在设计中自行设置列，因为我没有在设计中指定列，并且我从后面的代码中设置 SQL 数据源，并且列被设置为SQL 数据源的一部分。所以在设计中我有
<form id="form1" runat="server">
<div>
</div>
<asp:GridView ID="GridView1" runat="server" Font-Size=12px CellPadding="4"
ForeColor="#333333" GridLines="Vertical">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</form>
这是显示问题的屏幕截图（您可以观察标题宽度和列的变化）
但是这些链接中给出的示例指定了标签和列名。那么这是问题所在吗？
我该如何解决我的问题？如何将标题宽度设置为与列宽相同。
编辑：
下面是页面的渲染 html（但这个 HTML 显示了一些与浏览器中显示的 asp 页面不同的内容。显示的第一行在 HTML 中移动，但在 asp 中是正确的。但标题问题仍然存在于两者中）
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./Scrollable Gridview with Fixed Header_files/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="./Scrollable Gridview with Fixed Header_files/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>
Scrollable Gridview with Fixed Header
</title>
<script type="text/javascript" language="javascript">
$(document).ready(function()
$('#GridView1').Scrollable();
)
</script>
</head>
<body>
<form name="form1" method="post" action="./Scrollable Gridview with Fixed Header_files/Scrollable Gridview with Fixed Header.htm" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/">
</div>
<div>
</div>
<div>
<div></div><div><table cellspacing="0" cellpadding="4" rules="cols" border="1" style="color: rgb(51, 51, 51); font-size: 12px; width: 900px; border-collapse: collapse;"><tbody><tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
<th scope="col" style="width: 105px;">name</th><th scope="col" style="width: 241px;">Status</th><th scope="col" style="width: 59px;">Error</th><th scope="col" style="width: 96px;">No.</th><th scope="col" style="width: 37px;">date</th><th scope="col" style="width: 100px;">date1</th><th scope="col" style="width: 59px;">Received</th><th scope="col" style="width: 51px;">time1</th><th scope="col" style="width: 100px;">time2</th><th scope="col" style="width: 22px;">AY</th><th scope="col" style="width: 26px;">we</th><th scope="col" style="width: 84px;">Setft</th>
</tr></tbody></table></div><div style="overflow: auto; height: 200px; width: 917px;"><table cellspacing="0" cellpadding="4" rules="cols" border="1" id="GridView1" style="color:#333333;font-size:12px;width:900px;border-collapse:collapse;">
<tbody><tr style="color:#333333;background-color:#F7F6F3;">
<td style="width: 105px;">Sews</td><td style="width: 241px;">fggghtg</td><td style="width: 59px;">thtthgtrtht</td><td style="width: 96px;"> </td><td style="width: 37px;"> </td><td style="width: 100px;"> </td><td style="width: 59px;">17:52:53</td><td style="width: 51px;"> </td><td style="width: 100px;"> </td><td style="width: 22px;">14-15</td><td style="width: 26px;">1</td><td style="width: 84px;">sdgg</td>
</tr><tr style="color:#284775;background-color:White;">
<td>Ses</td><td>dffggg</td><td>Invalid </td><td> </td><td> </td><td> </td><td>18:00:31</td><td> </td><td> </td><td>14-15</td><td>1</td>
<td>DtyuFGtyuty</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td>Ses</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>18:03:42</td><td> </td><td> </td><td>14-15</td><td>1</td>
<td>yuutyutu</td>
</tr><tr style="color:#284775;background-color:White;">
<td>rttty N</td><td>dffggg</td><td>Invalid </td><td> </td><td> </td><td> </td><td>20:31:14</td><td> </td><td> </td><td>14-15</td><td>1</td>
<td>tyuutu</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td>tyu tyu tyu</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>17:37:02</td><td> </td><td> </td><td>14-15</td><td>2</td>
<td>tyutu</td>
</tr><tr style="color:#284775;background-color:White;">
<td>tyu tyu tyu</td><td>rerty tht.</td><td>Invalid</td>
<td>ytutyutu</td><td>13-08-2014</td><td>13-08-2014</td><td>11:43:23</td><td>10:37:26</td><td>10:37:26</td><td>14-15</td><td>2</td>
<td>tyuutyty</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td>Testing</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>11:45:34</td><td> </td><td> </td><td>14-15</td><td>1</td>
<td>tyutyu</td>
</tr><tr style="color:#284775;background-color:White;">
<td>Testing</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>11:48:22</td><td> </td><td> </td><td>14-15</td><td>1</td>
<td>tyuutut</td>
</tr>
</tbody></table></div></div>
</form>
</body></html>
【问题讨论】：
似乎您添加了一些与表格混淆的 CSS。您可以将其添加到您的问题中。表头和正文列不会“同步”，除非您对其进行一些不好的样式设置。 我想帮助你，但我没有使用 asp.net。你能给我们展示一下渲染的 html 吗？ 【参考方案1】：您可以使用其他解决方案，例如：http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html
它对我有用。
【讨论】：
它对我的情况很有用。但是，如果我以 px 为单位给出高度和宽度，那么它在不同的分辨率下会显示不同。所以我尝试使用 % ，当我用它来制作整个页面大小时，我得到了页面的滚动条，并且网格没有滚动，而是页面正在滚动。那么如何解决呢？【参考方案2】：我正在使用MakeStaticHeader函数的修改版本：
function MakeStaticHeader(gridId, hasFooter)
var height = $('#' + gridId).height();
var tbl = document.getElementById(gridId);
if (tbl)
var headerHeight = $('#' + gridId + ' tr:first-child').height();
var DivHR = document.getElementById(gridId + 'DivHeaderRow');
var DivMC = document.getElementById(gridId + 'DivMainContent');
var DivFR = document.getElementById(gridId + 'DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
//DivHR.style.width = (parseInt(width) - 16) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.marginRight = '17px';
//*** Set divMainContent Properties ****
//DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//*** Set divFooterRow Properties ****
//DivFR.style.width = (parseInt(width) - 16) + 'px';
DivFR.style.position = 'relative';
DivFR.style.top = -headerHeight + 'px';
DivFR.style.verticalAlign = 'top';
DivFR.style.paddingtop = '2px';
if (hasFooter)
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
//tblfr.style.width = '100%';
tblfr.cellSpacing = "0";
tblfr.border = "0px";
tblfr.rules = "none";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
【讨论】：
不，它不起作用。它不会将标题列宽设置为统一。在您的代码中，您从宽度中减去 16 以设置标题宽度。 16 是滚动条的宽度吗？以上是关于在gridview中冻结标题期间正确设置标题宽度和列的主要内容，如果未能解决你的问题，请参考以下文章