Gridview Header Freeze 在母版页中不起作用

Posted 2023-02-22

【中文标题】Gridview Header Freeze 在母版页中不起作用

【英文标题】：Gridview Header Freeze not working in Master Pages

【发布时间】：2012-08-13 17:20:23

【问题描述】：

我需要在滚动时冻结 gridview 标题。所以我得到了一个在普通页面中工作的脚本。但是在使用母版页时，它就像一个带有滚动条的普通网格。我应该在脚本中进行哪些更改以使其在母版页中工作。？

<script type="text/javascript" language="javascript">

            var GridId = "<%= GridView1.ClientID %>";
            var ScrollHeight = 300;
            window.onload = function () 
                var grid = document.getElementById(GridId);
                var gridWidth = grid.offsetWidth;
                var gridHeight = grid.offsetHeight;
                var headerCellWidths = new Array();
                for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) 
                    headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
                
                grid.parentNode.appendChild(document.createElement("div"));
                var parentDiv = grid.parentNode;

                var table = document.createElement("table");
                for (i = 0; i < grid.attributes.length; i++) 
                    if (grid.attributes[i].specified && grid.attributes[i].name != "id") 
                        table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                    
                
                table.style.cssText = grid.style.cssText;
                table.style.width = gridWidth + "px";
                table.appendChild(document.createElement("tbody"));
                table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
                var cells = table.getElementsByTagName("TH");

                var gridRow = grid.getElementsByTagName("TR")[0];
                for (var i = 0; i < cells.length; i++) 
                    var width;
                    if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) 
                        width = headerCellWidths[i];
                    
                    else 
                        width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                    
                    cells[i].style.width = parseInt(width - 3) + "px";
                    gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
                
                parentDiv.removeChild(grid);

                var dummyHeader = document.createElement("div");
                dummyHeader.appendChild(table);
                parentDiv.appendChild(dummyHeader);
                var scrollableDiv = document.createElement("div");
                if (parseInt(gridHeight) > ScrollHeight) 
                    gridWidth = parseInt(gridWidth) + 17;
                
                scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
                scrollableDiv.appendChild(grid);
                parentDiv.appendChild(scrollableDiv);
            

    </script>


 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
            <Columns
                <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>

【参考方案1】：

这可以使用 JQuery 来实现。上述脚本中的一些更改完成了这一点。得到输出。

// 将下面的代码放在一个.js 文件中

 (function ($) 
        $.fn.Scrollable = function (options) 
            var defaults = 
                ScrollHeight: 300,
                Width: 0
            ;
            var options = $.extend(defaults, options);
            return this.each(function () 
                var grid = $(this).get(0);
                var gridWidth = grid.offsetWidth;
                var headerCellWidths = new Array();
                for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) 
                    headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
                
                grid.parentNode.appendChild(document.createElement("div"));
                var parentDiv = grid.parentNode;

                var table = document.createElement("table");
                for (i = 0; i < grid.attributes.length; i++) 
                    if (grid.attributes[i].specified && grid.attributes[i].name != "id") 
                        table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                    
                
                table.style.cssText = grid.style.cssText;
                table.style.width = gridWidth + "px";
                table.appendChild(document.createElement("tbody"));
                table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
                var cells = table.getElementsByTagName("TH");

                var gridRow = grid.getElementsByTagName("TR")[0];
                for (var i = 0; i < cells.length; i++) 
                    var width;
                    if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) 
                        width = headerCellWidths[i];
                    
                    else 
                        width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                    
                    cells[i].style.width = parseInt(width - 3) + "px";
                    gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
                
                parentDiv.removeChild(grid);

                var dummyHeader = document.createElement("div");
                dummyHeader.appendChild(table);
                parentDiv.appendChild(dummyHeader);
                if (options.Width > 0) 
                    gridWidth = options.Width;
                
                var scrollableDiv = document.createElement("div");
                gridWidth = parseInt(gridWidth) + 17;
                scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";            
                scrollableDiv.appendChild(grid);
                parentDiv.appendChild(scrollableDiv);
            );
        ;
    )(jQuery);

// 在页面中添加这小段代码。

 <script type="text/javascript" language="javascript">
        $(document).ready(function () 
            $('#<%=this.grdDisplay.ClientID %>').Scrollable();
        
            )
    </script>

【参考方案2】：

我已经修改了上面的代码以支持多个网格视图。

(function ($) 
$.fn.Scrollable = function (options) 
    var defaults = 
        ScrollHeight: 300,
        Width: 0
    ;
    var options = $.extend(defaults, options);

    return this.each(function (index) 
        var grid = $(this).get(index);
        var gridWidth = grid.offsetWidth;
        var gridHeight = grid.offsetHeight;
        var headerCellWidths = new Array();
        for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) 
            headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
        
        grid.parentNode.appendChild(document.createElement("div"));
        var parentDiv = grid.parentNode;

        var table = document.createElement("table");
        for (i = 0; i < grid.attributes.length; i++) 
            if (grid.attributes[i].specified && grid.attributes[i].name != "id") 
                table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
            
        
        table.style.cssText = grid.style.cssText;
        table.style.width = gridWidth + "px";
        table.appendChild(document.createElement("tbody"));
        table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
        var cells = table.getElementsByTagName("TH");

        var gridRow = grid.getElementsByTagName("TR")[0];
        for (var i = 0; i < cells.length; i++) 
            var width;
            if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) 
                width = headerCellWidths[i];
            
            else 
                width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
            
            cells[i].style.width = parseInt(width - 3) + "px";
            gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
        
        parentDiv.removeChild(grid);

        var dummyHeader = document.createElement("div");
        dummyHeader.appendChild(table);
        parentDiv.appendChild(dummyHeader);
        if (options.Width > 0) 
            gridWidth = options.Width;
        
        var scrollableDiv = document.createElement("div");
        if (parseInt(gridHeight) > options.ScrollHeight) 
            gridWidth = parseInt(gridWidth) + 17;
        
        scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";
        scrollableDiv.appendChild(grid);
        parentDiv.appendChild(scrollableDiv);
    );
;
)(jQuery);

在页面中添加此代码。

<script type="text/javascript">
    $(document).ready(function () 
        $('#<%=GridView1.ClientID %>, #<%=GridView2.ClientID %>, #<%=GridView3.ClientID %>').Scrollable(
            ScrollHeight: 200
        );
    );
</script>