在 gridview 中冻结标题期间正确设置标题宽度和列 [英] Set header width and column properly during freeze the header in gridview
问题描述
我想要一个带有固定标题的 gridview.我试过这个
它对我有用.
I want to have a gridview with fixed header . I tried this link and this
I was able to do it all the time but there was problem with grid header width and columns width not being set equally. So it doesn't look good but scroll and freeze does work properly.If i don't use freeze logic then header width appears proper.
When i observed the code and compared with mine i found that they used to set columns in the design it self where as i don't specify columns in design and I set SQL data source from code behind and column are set as a part of SQL data source.So in design i have
<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>
here is a screenshot which shows the problem(You can observe the change in header width and columns)
But the example given in those links have tags and column names specified. So is this the problem?
How can i solve my problem? How can i set header width to same as column width.
edit:
Below is the rendered HTML of the page (but this HTML shows some what different than what asp page shows in browser. 1st row shown like shifted in HTML,but proper in asp. But header issue still exists in both)
<!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>
You can use another solution like this: http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html
It works for me.
这篇关于在 gridview 中冻结标题期间正确设置标题宽度和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
