如何在Gridview中使用固定标头？

Question

我目前的实施来自一位朋友。该项目有一个GridView，如下所示

<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>

现在，使用此GridView的更多一（1）.cs类，然后每个实现都不同。然后.cs类的“ONE”实现了一个“滚动”，如下所示。

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

但是上面的代码也会滚动标题，所以当我向下滚动标题时也会滚动。有没有办法通过在我的.cs文件中为此类添加“属性”来解决此问题。

由于

Answer 1

我写了jQuery插件可以修复header和freeze列，它可以应用于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米）
• Mozilla Firefox（16.0.2）
• Apple Safari（5.1.7）

Answer 2

替代解决方案，如果将CssClass添加到标头（ShowHeader =“ true”）：

<HeaderStyle CssClass="StickyHeader" />

并添加以下CSS

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

它使第一行的表数据而不是第一行的数据保持不变。这就是为什么这只是一个替代解决方案的原因，因为滚动条是从标题行开始的..但是，在对滚动条进行一些样式设置之后，结果并不是很糟糕。