具有固定标题和排序功能的可滚动gridview [英] Scrollable gridview with fixed header, and sorting capability

问题描述

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"

这篇关于具有固定标题和排序功能的可滚动gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！