asp.net - How to have a Fixed Header in a Gridview?

Question

I have this current implementation from a friend of mind. The project has a GridView as shown below

<div ID="divGrid" runat="server">
<asp:GridView ID="docGrid" runat="server" AutoGenerateColumns="False" GridLines="None"
    DataSourceID="pagedDatasetSourceControl" OnRowDataBound="docGrid_RowDataBound" OnSelectedIndexChanging="docGrid_SelectedIndexChanging" DataKeyNames="ID"
    CssClass="gridTable" AllowSorting="True" AllowPaging="True" meta:resourcekey="docGridResource1">
    <PagerSettings Visible="false"></PagerSettings>
    <Columns>
        ..................
    </Columns>
    <RowStyle CssClass="tableRow"></RowStyle>
    <PagerStyle VerticalAlign="Bottom" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle CssClass="tableRowAlt"></AlternatingRowStyle>
</asp:GridView>
</div>

Now, more that one (1) .cs classes using this GridView, then each implementation is different. Then "ONE" of the .cs class implements a "scrolling" which is shown below.

this.divGrid.Attributes.Add("class", "fleft scroll");
this.divGrid.Attributes.Add("style", "width:100%; height:250px;");

But the code above scrolls the header as well, so when I scroll down the header scrolls as well. Is there a way to fix this issue by adding an "Attributes" in my .cs file for this class.

Thanks

Answer 1

我写的jQuery插件可以固定标题和冻结列，它可以应用于GridView。看图片：

看网站： http: //gridviewscroll.aspcity.idv.tw/

支持的浏览器

• Internet Explorer 7、8（IE 9 兼容性）
• Internet Explorer 9 (9.0.8112)
• Windows 7 预览版上的 Internet Explorer 10
• 谷歌浏览器(23.0.1271.64 m)
• 火狐 (16.0.2)
• 苹果 Safari (5.1.7)

Answer 2

替代解决方案，如果您将 CssClass 添加到标题（ShowHeader="true"）：

<HeaderStyle CssClass="StickyHeader" />

并添加以下css

.StickyHeader th {
   position: sticky;
   top: 0
}

它使第一行的表格数据，而不是行。这就是为什么这只是一个替代解决方案的原因，因为滚动条是从标题行开始的。但是在你稍微设置了滚动条的样式之后，结果还不错。