使用 JQuery 冻结 Gridview 页眉

• 下载源代码 - 163.2 KB

引言

我们可能知道很多用于修复 GridView 头部的方法。就个人而言，我觉得有些脚本有点难以理解，而有些脚本在分页和排序时效果不佳。

在这里，我建议使用一个简单的 jQuery 来固定 GridView 头部，它在分页和排序时也能很好地工作。

Using the Code

在 ASP 设计页面中，只需创建两个网格

• dgvHeader （我们将用于固定头部）
• dgvSample （这是用于绑定数据的实际网格）

使用数据绑定方法将数据绑定到网格。

JQuery

请参阅下面的 jQuery 以修复头部

    (function ($) {
    $.fn.Scrollable = function (options) {
        var defaults = {
            ScrollHeight: 200, // to set height of grid 
            Width:305 // to set width of grid Default value is 0 
        };
        var options = $.extend(defaults, options);
        return this.each(function () {
            var grid = $(this).get(0);
            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);    

在 ASP 设计页面头部调用 jQuery，并将网格名称作为参数传递

        $(document).ready(function () {  // Datagrid Header Freeze
            $("#<%=dgvHeader.ClientID %>").Scrollable({
                ScrollHeight: 200
            });
            $("#<%=dgvSample.ClientID %>").Scrollable({
                ScrollHeight: 200
            });
        });    

我们可以使用 scrollHeight 参数更改高度。
这在水平和垂直滚动中都能很好地工作，垂直滚动时尤其如此。

参考

我参考了该网站来解决这个问题

• http://cross-browser.com/x/examples/xthf-demo.php?s=sep&n=3