11

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

4

8 回答 8

4

你可以在css中做到这一点

Freeze Header： 1. 在样式表中定义类 .Freezing：

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

2.Assign Datagrid Header的cssClass为Freezing

于 2008-10-01T13:29:56.963 回答
2

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

选项（b）自己动手 - 这并不简单。Dino Esposito有一种方法。

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

这是使用扩展器的另一种方法。

于 2008-10-01T13:23:39.197 回答
2

试试这个 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

于 2010-02-04T16:44:46.167 回答
2

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

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

我个人使用它们，我真的很喜欢它！

要检查控件，请单击此处：IdeaSparks ASP.NET CoolControls

希望这可以帮助！

于 2011-11-12T03:39:48.467 回答
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>

.headerGrid 标头的 css 类在哪里。

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

于 2012-09-24T13:15:21.200 回答
1

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

于 2009-01-13T07:49:42.150 回答
1

您可以尝试以下示例

冻结 GridView 列

于 2010-07-28T07:53:38.653 回答
0 
        <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>
于 2021-05-30T06:27:24.303 回答