如何冻结 GridView 标题？答案

【问题标题】：How to freeze GridView header?如何冻结 GridView 标题？
【发布时间】：2010-09-14 12:36:41
【问题描述】：

如标题所示，有人知道如何在 ASP.NET 中冻结 GridView 标头吗？

【问题讨论】：

您可以查看this问题。

【解决方案1】：

        <script src="Scripts/jquery-1.7.1.js"></script>
        <script language="javascript" >
            $(document).ready(function () {
                var gridHeader = $('#<%=GridView1.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
                $(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
                $('#<%=GridView1.ClientID%> tr th').each(function (i) {
                    // Here Set Width of each th from gridview to new table(clone table) th 
                    $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
                });
                $("#GHead").append(gridHeader);
                $('#GHead').css('position', 'absolute');
                $('#GHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
        
            });
        </script>
    




            <h3>Scrollable Gridview with fixed header in ASP.NET</h3>
            <br />
            <div style="width:550px;">
                <div id="GHead"></div> 
                <%-- This GHead is added for Store Gridview Header  --%>
                <div style="height:300px; overflow:auto">
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
                        CellPadding="5" HeaderStyle-BackColor="#f3f3f3">
                        <Columns>
                            <asp:BoundField HeaderText="ID" DataField="StateID" />
                            <asp:BoundField HeaderText="Country" DataField="Country" />
                            <asp:BoundField HeaderText="StateName" DataField="StateName" />
                        </Columns>
                    </asp:GridView>
                </div>
            </div>

【讨论】：

【解决方案2】：

我想我有这个解决方案。请看下面的javascript代码

<script type="text/javascript" language="javascript">
    var orgTop = 0;
    $(document).scroll(function () {
        var id = $("tr:.header").get(0);
        var offset = $(id).offset();
        var elPosition = $(id).position();
        var elWidth = $(id).width();
        var elHeight = $(id).height();
        if (orgTop == 0) {
            orgTop = elPosition.top;
        }
        if ($(window).scrollTop() <= orgTop) {
            id.style.position = 'relative';
            id.style.top = 'auto';
            id.style.width = 'auto';
            id.style.height = 'auto';
        }
        else {
            id.style.position = 'absolute';
            id.style.top = $(window).scrollTop() + 'px';
            id.style.width = elWidth + 'px';
            id.style.height = elHeight + 'px';

        }
    });
</script>

.header 是您的 Grid 标头的 css 类。

只需在页面上添加此脚本并将header 替换为您用于标题的css 类名称。

【讨论】：

【解决方案3】：

在使用 Asp.Net 2.0 / 3.5 开发 Web 应用程序时，我也遇到了类似的问题。

美好的一天，我遇到了 IdeaSparks ASP.NET CoolControls。它有助于显示修复列标题、页脚和分页器。

我亲自使用过它们，我真的很喜欢它！

To check the control click here : IdeaSparks ASP.NET CoolControls

希望这会有所帮助！

【讨论】：

【解决方案4】：

您可以尝试以下示例

Freeze GridView Columns

【讨论】：

【解决方案5】：

试试这个 ASP.NET 的开源项目。它扩展了 GridView 以提供固定的页眉、页脚和分页器以及可调整大小的列宽。在 IE 6/7/8、Firefox 3.0/3.5、Chrome 和 Safari 中运行良好。

http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html

【讨论】：

【解决方案6】：

试试这个应该可以解决问题 http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

【讨论】：

【解决方案7】：

你可以在css中做到这一点

冻结标题： 1.在样式表中定义类.Freezing：

.Freezing
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

2.Assign Datagrid Header的cssClass到Freezing

【讨论】：

但它似乎只能在 IE 下工作，而不能在 FF 下工作 :( 无论如何，谢谢！:)
更具体地说，表达式在 IE8 标准模式下不起作用。

【解决方案8】：

选项 (a) 购买一个 UI 包，其中包含一个内置此功能的增强型 GridView。

选项 (b) 自己动手 - 这并不简单。迪诺埃斯波西托has one approach。

编辑：刚刚注意到 Dino 文章链接到 ASPnetPro 杂志网站上的仅限订阅者区域。

这里是another approach 使用扩展器。

【讨论】：

如果标题由一个主标题和多个子标题组成，如何冻结？
@bonCodigo - 如果您将问题作为单独的问题发布，您可能会得到更好的答复。在这种情况下，您可能没有使用 ASP.NET GridView，对吧？
我在 Web 应用程序中有网格视图。由于维护服务器端响应，我们只需要坚持使用 gridview。最大的挑战是子标题。最坏的情况是，我们计划将标题放在 html 中并从 gridview 中隐藏标题。但是，我有一种不好的感觉，DML/CRUD 性能不佳。