Question

在标题中，是否有人知道如何在ASP.NET中冻结GridView标头？

Answer 1

你可以在css

中完成

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

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

2.将Datagrid Header的cssClass分配给Freezing

Answer 2

选项（a）购买包含内置此功能的加强版GridView的UI包。

选项（b）推出自己的选项 - 这并不简单。迪诺埃斯波西托has one approach。

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

这是使用扩展程序的another approach。

Answer 3

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

Answer 4

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

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

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

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

希望这有帮助！

Answer 5

我想我已经解决了这个问题。请看下面的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类名称。

Answer 6

试一试应解决问题 http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

Answer 7

您可以尝试以下示例

Freeze GridView Columns

Answer 8

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

如何冻结GridView头？

8 个答案: