在网格视图中冻结标题期间正确设置标题宽度和列
我想要一个带固定标题的gridview。我试过这个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>
2 个答案:
答案 0 :(得分：2)
答案 1 :(得分：1)
我正在使用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));
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？