GridView表头固定 滚动解决办法
日期：2014-05-18 浏览次数：20430 次
GridView表头固定 滚动
搜到几个都没成功
1.孟子
<script type= "text/javascript ">
function s()
{
var t = document.getElementById( " <%=GridView1.ClientID%> ");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s()
</script>
<div id=a> </div>
这个t等于null
2.singlepine
http://singlepine.cnblogs.com/archive/2005/10/30/265019.html
没搞成
3.最简单的一个
<style>
.Freezing
{
position:relative ;
table-layout:fixed;
top:expression(this.offsetParent.scrollTop);
left:expression(this.offsetParent.scrollLeft);
z-index: 10;
}
</style>
<HeaderStyle BackColor= "#cc0000 " Font-Bold= "True " CssClass= "Freezing " ForeColor= "#E7E7FF " />
这个基本可以，
但是 1.比如把网页缩小后表头移位
2.隐约能看到表体有一点点到了表头的上面
谁有好方法不
?
我的数据是动态绑定的
------解决方案--------------------
/*
合并且固定表头：
BUG：在IE6上滑动条移动后如表格内容中存在dropdownlist，则dropdownlist将与表格叠加，这个问题估计是IE6的BUG
前台：
(注意：DataGrid的HeaderStyle中加入这句CssClass= "Freezing ")
(注意：DataGrid的边框会存在白边，将边线颜色和表头背景颜色设为同一种颜色，BorderStyle= "None ")
Author:QQ:50382187
*/
<head>
<style> .Freezing {
TABLE-LAYOUT: fixed; Z-INDEX: 10; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop)
}
.Freezing TH {
PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; PADDING-TOP: 2px; WHITE-SPACE: nowrap
}
</style>
<head>
...
<div style= "OVERFLOW-Y: scroll; Z-INDEX: 101; LEFT: 16px; WIDTH: 560px; POSITION: absolute; TOP: 48px; HEIGHT: 216px "> <asp:datagrid id= "DataGrid1 " runat= "server " BorderStyle= "None " BorderColor= "MediumSeaGreen " Height= "104px "
Width= "552px " HorizontalAlign= "Center " BorderWidth= "1px " AutoGenerateColumns= "False ">
<HeaderStyle ForeColor= "White " CssClass= "Freezing " BackColor= "MediumSeaGreen "> </HeaderStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:DropDownList id= "DropDownList1 " runat= "server " DataSource= ' <%# ddlBindName()%> ' DataValueField= "CompanyName " DataTextField= "CompanyName ">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
<asp:Te
搜到几个都没成功
1.孟子
<script type= "text/javascript ">
function s()
{
var t = document.getElementById( " <%=GridView1.ClientID%> ");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s()
</script>
<div id=a> </div>
这个t等于null
2.singlepine
http://singlepine.cnblogs.com/archive/2005/10/30/265019.html
没搞成
3.最简单的一个
<style>
.Freezing
{
position:relative ;
table-layout:fixed;
top:expression(this.offsetParent.scrollTop);
left:expression(this.offsetParent.scrollLeft);
z-index: 10;
}
</style>
<HeaderStyle BackColor= "#cc0000 " Font-Bold= "True " CssClass= "Freezing " ForeColor= "#E7E7FF " />
这个基本可以，
但是 1.比如把网页缩小后表头移位
2.隐约能看到表体有一点点到了表头的上面
谁有好方法不
?
我的数据是动态绑定的
------解决方案--------------------
/*
合并且固定表头：
BUG：在IE6上滑动条移动后如表格内容中存在dropdownlist，则dropdownlist将与表格叠加，这个问题估计是IE6的BUG
前台：
(注意：DataGrid的HeaderStyle中加入这句CssClass= "Freezing ")
(注意：DataGrid的边框会存在白边，将边线颜色和表头背景颜色设为同一种颜色，BorderStyle= "None ")
Author:QQ:50382187
*/
<head>
<style> .Freezing {
TABLE-LAYOUT: fixed; Z-INDEX: 10; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop)
}
.Freezing TH {
PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; PADDING-TOP: 2px; WHITE-SPACE: nowrap
}
</style>
<head>
...
<div style= "OVERFLOW-Y: scroll; Z-INDEX: 101; LEFT: 16px; WIDTH: 560px; POSITION: absolute; TOP: 48px; HEIGHT: 216px "> <asp:datagrid id= "DataGrid1 " runat= "server " BorderStyle= "None " BorderColor= "MediumSeaGreen " Height= "104px "
Width= "552px " HorizontalAlign= "Center " BorderWidth= "1px " AutoGenerateColumns= "False ">
<HeaderStyle ForeColor= "White " CssClass= "Freezing " BackColor= "MediumSeaGreen "> </HeaderStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:DropDownList id= "DropDownList1 " runat= "server " DataSource= ' <%# ddlBindName()%> ' DataValueField= "CompanyName " DataTextField= "CompanyName ">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
<asp:Te
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
