如何冻结具有动态列的 Gridview 标题？答案

【问题标题】：How to Freeze Gridview Header having dynamic Columns?如何冻结具有动态列的 Gridview 标题？
【发布时间】：2015-02-07 01:36:57
【问题描述】：

Aspx 页面：下面是我的 Gridview，动态生成的列名

<div id="header" style="height: 200px;overflow:scroll ">
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" >
 <HeaderStyle CssClass="fixedHeader" />
 </asp:GridView>
 </div>

冻结标题的 Css 类：

    .fixedHeader
    {
        background-color:Gray;
        position: relative;
        cursor: default;            
        top: expression(document.getElementById("header").scrollTop-2); 
        z-index: 10;

    }

我都是通过 javascript 完成的，jquery 仍然无法正常工作（源示例：asspsn-p、codeproject 等）没有任何效果。请帮助我谢谢

【问题讨论】：

标签： css asp.net .net gridview

【解决方案1】：

解决方案 1：

将 GridView 设置为将 thead 作为标题，将 tbody 作为正文。在 RowDataBound 中设置 GridView.HeaderRow.TableSection = TableRowSection.TableHeader;
使用这里的想法：http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/

稍微修改一下代码，等待加载图片，然后修改第th个元素的宽度：

window.onload = function () { $("table.tableWithFloatingHeader").each(function () { $(this).wrap("");

    $("tr:first", this).before($("tr:first", this).clone());
    clonedHeaderRow = $("tr:first", this);
    clonedHeaderRow.addClass("tableFloatingHeader");
    clonedHeaderRow.css("position", "absolute");
    clonedHeaderRow.css("top", "0px");
    clonedHeaderRow.css("left", "0px");
    clonedHeaderRow.css("visibility", "hidden");

    var row_ths = $("tr:nth-child(2)", this).children("th");
    var crow_ths = $("tr:nth-child(1)", this).children("th"); ;

    for (var i = 0; i < row_ths.size(); ++i) {
        crow_ths.eq(i).width(row_ths.eq(i).width() + 2);
    }
});

这适用于 IE8、FF 和 Chorme。

解决方案 2：

对于这个特性，我们也使用了 Jquery 和一些 Javascript。这个将在标题已冻结时使 Gridview 数据可滚动在顶部。这将在查看大量数据时帮助我们，并且想知道哪个列与哪个标题相关。

SOURCE

【讨论】：

【解决方案2】：

基于解决方案 1 的完整答案（效果很好，看起来很棒）。

将此添加到您的 aspx。

 <style>
    .floatingHeader {
      position: fixed;
      top: 0;
      visibility: hidden;
      background-color:antiquewhite;
       z-index: 1000;
    }
    </style>

<script>

function UpdateTableHeaders() {
    $(".persist-area").each(function () {

        var el             = $(this),
            offset         = el.offset(),
            scrollTop      = $(window).scrollTop(),
            floatingHeader = $(".floatingHeader", this)

        if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
            floatingHeader.css({
                "visibility": "visible"
            });
        } else {
            floatingHeader.css({
                "visibility": "hidden"
            });
        };
    });
}

    // DOM Ready
    $(function() {

        $(window)
         .scroll(UpdateTableHeaders)
         .trigger("scroll");

    });
    window.onload = function () {
        $("table.tableWithFloatingHeader").each(function () {
            $(this).wrap("<div class='divTableWithFloatingHeader' style='position:relative'></div>");

            $("tr:first", this).before($("tr:first", this).clone());
            clonedHeaderRow = $("tr:first", this);
            clonedHeaderRow.addClass("floatingHeader");


            var row_ths = $("tr:nth-child(2)", this).children("th");
            var crow_ths = $("tr:nth-child(1)", this).children("th"); ;

            for (var i = 0; i < row_ths.size(); ++i) {
                crow_ths.eq(i).width(row_ths.eq(i).width() );
            }
        });
    }
    window.onresize = function () {
        $("table.tableWithFloatingHeader").each(function () {

            clonedHeaderRow = $("tr:first", this);

            var row_ths = $("tr:nth-child(2)", this).children("th");
            var crow_ths = $("tr:nth-child(1)", this).children("th");;

            for (var i = 0; i < row_ths.size() ; ++i) {
                crow_ths.eq(i).width(row_ths.eq(i).width());
            }
        });

    }
</script>

现在在你的表上添加以下两个类persist-area tableWithFloatingHeader 和 HeaderStyle Class of presist-header

 <asp:GridView EnableViewState="false"  ID="grid_Results" runat="server" AutoGenerateColumns="False" Class="persist-area tableWithFloatingHeader">

它会起作用的。

如果您还想更改标题的颜色，您需要执行以下两个步骤。

在后面加上

并在 aspx.vb 后面的代码中添加网格的数据绑定事件

   Protected Sub grid_Results_DataBound(sender As Object, e As EventArgs) Handles grid_Results.DataBound
        If grid_Results.HeaderRow IsNot Nothing Then
            grid_Results.HeaderRow.TableSection = TableRowSection.TableHeader
        End If
    End Sub

【讨论】：