我看了很多固定标题网格视图的例子,并尝试了使用div和java脚本的一些选项。我没有从这个例子中学习,这里有什么我错过的吗。
CSS
.gridViewHeader
{
background-color:Navy;
color:blue;
font-size:12px;
font-weight:bold;
position:relative;
z-index:10;
top:expression(<%= gv.HeaderRow %>.offsetParent.scrollTop-2);
}
design source
<table>
<tr>
<td>
</td>
</tr>
</table>
<div>
<asp:GridView ID="gv" runat="server" CellPadding="4" PageSize="50" RowHeaderColumn="True"
AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None"
BorderWidth="1px" CssClass="gridViewHeader">
<PagerSettings Mode="NumericFirstLast" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" VerticalAlign="Middle" />
<RowStyle BackColor="White" ForeColor="#003399" BorderStyle="Inset" HorizontalAlign="Center"
VerticalAlign="Middle" Wrap="False" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
</asp:GridView>
</div>
<asp:HiddenField ID="hiddenfield1" runat="server" />
</asp:Content>
您可以使用
<HeaderStyle CssClass="gridViewHeader" />
对于您的样品
<asp:GridView ID="gv" runat="server" CellPadding="4" PageSize="50" RowHeaderColumn="True"
AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None"
BorderWidth="1px" >
<HeaderStyle CssClass="gridViewHeader" />
<PagerSettings Mode="NumericFirstLast" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" VerticalAlign="Middle" />
<RowStyle BackColor="White" ForeColor="#003399" BorderStyle="Inset" HorizontalAlign="Center"
VerticalAlign="Middle" Wrap="False" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
</asp:GridView>
此CSS将修复您的问题:
.GVFixedHeader { font-weight:bold; background-color: Green; position:relative;
top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
我刚刚做了这件事。我用这篇文章作为参考。
http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html
诀窍是创建一个表,然后将网格放在该表下方的div中。将详细信息单元格的宽度设置为与网格视图中的单元格相同的宽度。然后确保滚动条保持打开,然后在没有足够的行实际需要滚动功能的情况下,网格和表格将对齐。