具有固定标题和排序功能的可滚动gridview
问题描述:
I want to implement a scrollable gridview with fixed header, including the capability to sort on the header (the code is shown below). Please provide advice.
<div style="overflow: scroll; width: 100%; height: 350px">
<asp:GridView id="GridView1" runat="server" Width="754px"
OnRowDataBound="GridView1_RowDataBound"DataKeyNames="UniqueID"
GridLines="None" ForeColor="#333333"
EmptyDataText="There are no data records to display."
DataSourceID="sdsMapsAdd" CellPadding="4" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="False" OnRowCommand="GridView1_RowCommand"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="UniqueID" Visible="false" />
<asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" SortExpression="SiteName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
另外,我正在尝试使用这个脚本
Also, I am trying to use this script
<script language="javascript" type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position
function BeginRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
}
</script>
和CSS我正在使用:
and CSS I am using :
.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
但是这样做我的标题不固定。请让我知道我在这儿失踪吗?
谢谢&问候
Care Career
However doing this my header is not fixed. Please let me know whar I am missing here?
Thanks & Regards
Care Career
答
你需要设置 Gridview的HeaderStyle CssClass
如下
CssClass="HeaderFreez"