Question

Aspx Page：下面是我的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仍然无法正常工作（源代码示例：asspsnippet，codeproject等等）无效。请帮助我谢谢

Answer 1

解决方案1：

将GridView设置为将header作为标题，将tbody作为body。在RowDataBound中设置GridView.HeaderRow.TableSection = TableRowSection.TableHeader;
使用此处的提示：http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/

稍微修改代码以等待加载图像然后修改第th个元素的宽度：

window.onload = function（）{ $（＆＃34; table.tableWithFloatingHeader＆＃34;）。each（function（）{ $（本）.wrap（＆＃34;＆＃34）;

    $("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 Data可以滚动在顶部。这将帮助我们查看大量数据，和想知道哪一列与哪个标题有关。

<强> SOURCE

Answer 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和presist-header的HeaderStyle类

 <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

如何冻结具有动态列的Gridview标头？

2 个答案: