我想要一个带有固定 header 的 gridview 。我试过这个link and 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>
这是显示问题的屏幕截图(您可以观察标题宽度和列的变化)
But the example given in those links have tags and column names specified. So is this the problem?
我该如何解决我的问题?如何将标题宽度设置为与列宽度相同。
edit:
下面是页面的渲染 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>