设置标题宽度和列妥善期间冻结gridview的头 [英] Set header width and column properly during freeze the header in gridview
本文介绍了设置标题宽度和列妥善期间冻结gridview的头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想有固定的头一个gridview。我想这链接和<一个HREF =HTTP：//www.$c$cproject.com/Articles/250669/Gridview-with-Fixed-Header相对=nofollow>这个
我能够做这一切的时候，但有一个与网格标题的宽度和列宽度不被设置同样的问题。所以它看起来并不好，但滚动并冻结确实工作properly.If我不使用冷冻的逻辑则头的宽度显得恰当。
在我所观察到的code和与我相比，我发现他们用在设计它的自我设置列在这里，因为我不指定设计列，我设置SQL数据源从code背后和列设置为SQL数据source.So的设计中的一部分，我有
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT; ＆LT; / DIV＆GT; ＆LT; ASP：GridView控件ID =GridView1=服务器FONT-SIZE = 12px的CELLPADDING =4
前景色=＃333333网格=垂直＆GT; ＆LT; RowStyle的BackColor =＃F7F6F3前景色=＃333333/＆GT;
＆LT; FooterStyle背景色=＃5D7B9DFONT-粗体=真前景色=白/＆GT;
＆LT; PagerStyle背景色=＃284775前景色=白HorizontalAlign =中心/＆GT;
＆LT; SelectedRowStyle背景色=＃E2DED6FONT-粗体=真前景色=＃333333/＆GT;
＆LT; HeaderStyle背景色=＃5D7B9DFONT-粗体=真前景色=白/＆GT;
＆LT; EditRowStyle背景色=＃999999/＆GT;
＆LT; AlternatingRowStyle背景色=白前景色=＃284775/＆GT;
＆LT; / ASP：GridView的＆GT;＆LT; /表及GT;
下面是截图，显示问题（你可以观察头宽度和列的变化）
但是，在这些链接中给出的例子有指定的标签和列名。因此，这是什么问题？
我怎样才能解决我的问题？我怎样才能头部宽度设置为相同的列宽。
编辑：
下面是页面的呈现的HTML（但此HTML显示比的asp页显示在浏览器的一些什么不同。与HTML类似，移位所示第1行，但在ASP正确，但头问题仍然在两个存在）
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;＆LT; HEAD＆GT;＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8 ＆GT;＆LT;脚本SRC =./滚动的GridView与固定Header_files / jQuery的-1.4.1.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =./滚动的GridView与固定Header_files / ScrollableGridPlugin.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;标题＆GT;
滚动的GridView与固定头
＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的LANGUAGE =JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃GridView1'）滚动（）。
}
）
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表格名称=Form1的方法=邮报行动=./滚动的GridView与固定Header_files /滚动带的GridView固定Header.htmID =form1的＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=隐藏的名字=__ VIEWSTATEID =__ VIEWSTATEVALUE =/＆GT;
＆LT; / DIV＆GT;＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; DIV＆GT;＆LT; / DIV＆GT;＆LT; DIV＆GT;＆LT;表CELLSPACING =0的cellpadding =4规则=COLSBORDER =1的风格=COLOR：RGB（51，51，51）;字体大小：12像素;宽度：900px;边界崩溃：崩溃;＆GT;＆LT; TBODY＆GT;＆LT; TR风格=颜色：白色，背景色：＃5D7B9D;字体重量：大胆;＆GT;
百分位范围=山口的风格=WIDTH：105px;＆GT;名称＆LT; /第i个百分位范围=山口的风格=WIDTH：241px;＆GT;状态＆LT; /第i个百分位范围=山口的风格=宽度：59px;＆GT;错误＆LT; /第i个百分位范围=山口的风格=宽度：96PX;＆GT;第＆LT; /第i个百分位范围=山坳的风格=宽度：37px;＆GT;日期＆LT; /第i个百分位范围=山口的风格=宽度：100像素;＆GT;日期1＆LT; /第i个百分位范围=山口的风格= 宽度：59px;＆GT;接收到的LT; /第i个百分位范围=山口的风格=宽度：51px;＆GT;时间1＆LT; /第i个百分位范围=山口的风格=WIDTH：100px的;＆GT;时间2＆LT; /第i个百分位范围=山口的风格=WIDTH：的22px;＆GT; AY＆LT; /第i个百分位范围=山口的风格=宽度：26px;＆GT;我们＆LT; /第i个百分位范围=山口的风格=宽度：84px;＆GT; Setft＆LT; /第i
＆LT; / TR＆GT;＆LT; / TBODY＆GT;＆LT; /表＆gt;＆LT; / DIV＆GT;＆LT; DIV的风格=溢出：汽车;高度：200像素; WIDTH：917px;＆GT;＆LT;表CELLSPACING =0的cellpadding =4规则=COLSBORDER =1ID =GridView1的风格=COLOR：＃333333; FONT-SIZE：12px的; WIDTH：900px;边界崩溃：崩溃;＆GT;
＆LT;＆TBODY GT;＆LT; TR风格=COLOR：＃333333;背景颜色：＃F7F6F3;＆GT;
＆LT; TD风格=WIDTH：105px;＆GT;缝制＆LT; / TD＆GT;＆LT; TD风格=WIDTH：241px;＆GT; fggghtg＆LT; / TD＆GT;＆LT; TD风格=宽度：59px;＆GT; thtthgtrtht＆LT ; / TD＆GT;＆LT; TD风格=宽度：96PX;＆GT;＆安培; NBSP;＆LT; / TD＆GT;＆LT; TD风格=宽度：37px;＆GT;＆安培; NBSP;＆LT; / TD＆GT;＆LT; TD风格=宽度：100像素;＆GT;＆安培; NBSP;＆LT; / TD＆GT;＆LT; TD风格=宽度：59px;＆GT; 17：52：53＆LT; / TD＆GT;＆LT; TD风格=WIDTH： 51px;＆GT;＆安培; NBSP;＆LT; / TD＆GT;＆LT; TD风格=宽度：100像素;＆GT;＆安培; NBSP;＆LT; / TD＆GT;＆LT; TD风格=WIDTH：的22px;＆GT; 14 -15℃; / TD＆GT;＆LT; TD风格=宽度：26px;＆GT; 1＆LT; / TD＆GT;＆LT; TD风格=宽度：84px;＆GT; sdgg＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃284775;背景颜色：白色;＆GT;
＆LT; TD＆GT;经济局局长和LT; / TD＆GT;＆LT; TD＆GT; dffggg＆LT; / TD＆GT;＆LT; TD＆GT;无效</td><td> </td><td> </td><td> </td><td>18:00:31</td><td> </td><td> </td><td>14-15</td><td>1</td>
＆LT; TD＆GT; DtyuFGtyuty＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃333333;背景颜色：＃F7F6F3;＆GT;
<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>
＆LT; TD＆GT; yuutyutu＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃284775;背景颜色：白色;＆GT;
＆LT; TD＆GT; rttty N'LT; / TD＆GT;＆LT; TD＆GT; dffggg＆LT; / TD＆GT;＆LT; TD＆GT;无效</td><td> </td><td> </td><td> </td><td>20:31:14</td><td> </td><td> </td><td>14-15</td><td>1</td>
＆LT; TD＆GT; tyuutu＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃333333;背景颜色：＃F7F6F3;＆GT;
＆LT; TD＆GT; 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>
＆LT; TD＆GT; tyutu＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃284775;背景颜色：白色;＆GT;
＆所述; TD＆GT; TYU TYU TYU＆下; / TD＆GT;＆下; TD方式＆gt; rerty THT＆下; / TD＆GT;＆下; TD＆GT;无效＆下; / TD＆GT;
<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>
＆LT; TD＆GT; tyuutyty＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃333333;背景颜色：＃F7F6F3;＆GT;
<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>
＆LT; TD＆GT; tyutyu＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; TR风格=COLOR：＃284775;背景颜色：白色;＆GT;
<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>
＆LT; TD＆GT; tyuutut＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;＆LT; /表＆gt;＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; /表及GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
解决方案
您可以使用这样的另一种解决方案：的 http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html
这为我工作。
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屋！
查看全文
