jquery - jqgrid 固定列标题和固定页脚

Question

我正在寻找修复 jqgrid 列标题和固定页脚。当有其他项目以及带有数据的 jqgrid 时，我正在寻找修复标题，以便用户始终知道他在看什么。

这是我正在寻找的样本

请注意，这里我正在查看浏览器滚动条。jqgrid 支持这个吗？

编辑

因为 JQGrid 毕竟是 html 表格，所以我尝试使用jQuery TH Float Plugin。现在事实证明，JqGrid 由三个表组成，一个用于页眉，一个用于数据，另一个用于页脚。所以看来我要么必须修改 thfloat 以适应这一点，要么想出别的东西......

Answer 1

这是一个难以破解的难题。

我让它通过 First css 覆盖默认值溢出：隐藏到

.ui-jqgrid .ui-jqgrid-sdiv{overflow:visible;}
.ui-jqgrid .ui-jqgrid-hdiv{overflow:visible;}

在 javascript JQuery 来救我我实现了以下

function screenBottom() {
    return $(window).scrollTop() + $(window).height();
}     
$(window).scroll(function () {
        var dataTableTop = dataTable.offset().top;
        var dataTableHeight = dataTableTop + dataTable.outerHeight();
        var windowTop = $(window).scrollTop();
        var windowBottom = screenBottom();
        //Scroll down         
        if (windowTop > dataTableTop - headerTable.height()
                && windowTop < (dataTableHeight - headerTable.height())) {
            headerTable.offset({ top: windowTop, left: headerTable.offset().left });
        }
        //For footer
        if (windowBottom > dataTable.offset().top + footerTable.outerHeight()
                && windowBottom < dataTableHeight + footerTable.outerHeight()) {
            footerTable.offset({ top: windowBottom - footerTable.outerHeight(), left: footerTable.offset().left });
        }
        //Re adjust of the movement is too fast
        if (windowTop < (dataTableTop - headerTable.height())
            && dataTableTop < (headerTable.offset().top + headerTable.height())) {
            headerTable.offset({ top: dataTable.offset().top - headerTable.height(), left: headerTable.offset().left });
        }
        if (windowBottom > dataTableHeight + footerTable.outerHeight()) {
            footerTable.offset({ top: dataTableHeight, left: footerTable.offset().left });
        }

    });

然后在调整窗口大小时检查页脚和页眉

        $(window).resize(function () {
            setInitializeHeadersAndFootersPosition();
        });
function setInitializeHeadersAndFootersPosition() {
            var dataTableTop = dataTable.offset().top;
            var dataTableHeight = dataTableTop + dataTable.outerHeight();
            var windowTop = $(window).scrollTop();
            var windowBottom = screenBottom();
            if (windowBottom > dataTableTop && windowBottom < dataTableHeight) {
                footerTable.offset({ top: windowBottom - footerTable.outerHeight(), left: footerTable.offset().left });
            }
            if (footerTable.offset().top < dataTableHeight && windowBottom > dataTableHeight) {
                footerTable.offset({ top: dataTableHeight, left: footerTable.offset().left });
            }
            if (windowTop > dataTableTop && windowTop < dataTableHeight) {
                headerTable.offset({ top: windowTop, left: headerTable.offset().left }); //Header does not need the offset
            }
        }

Answer 2

Sarath，多么棒的解决方案，对我帮助很大。我已经扩展了您的工作，因此当它第一次从页面滚动/重新定位时，标题只会“反弹”一次。之后位置切换到固定，但是还有很多其他元素需要补偿。享受！

$(window).bind('scroll', function () {
    var _grid = $('#jqGrid');  // jqgrid name
    var dataTable = $(_grid[0].grid.bDiv);
    var headerTable = $(_grid[0].grid.hDiv);
    var dataTableTop = dataTable.offset().top;
    var dataTableHeight = dataTableTop + dataTable.outerHeight();
    var windowTop = $(window).scrollTop();
    var headerTablePosition = headerTable[0].style.position;

    //Scroll down         
    if (windowTop > dataTableTop - headerTable.height() && windowTop < (dataTableHeight - headerTable.height()) && headerTablePosition != "fixed")
    {
        var leftOffset = headerTable.offset().left + 'px';  // grab the offset before changing postition
        $(dataTable).css("top", (headerTable.height()+1) + "px");  // +1 to account for the border width of the header
        headerTable[0].style.position = "fixed";
        headerTable[0].style.top = "0px";
        headerTable[0].style.left = leftOffset;
        dataTable[0].style.height = "auto";
        $($(_grid[0].grid.sDiv)).css("top", (headerTable.height() + 1) + "px");  // footer table, +1 to account for the border width of the header
        var gridHeightString = $('#gview_jqGrid').css("height").replace("px", "");
        var newGridHeight = parseInt(gridHeightString) + headerTable.height() + 1;  // +1 to account for the border width of the header
        $("#gview_jqGrid").css("height", newGridHeight + "px"); //outermost grid element
    }
    //Scroll up
    else if (windowTop < (dataTableTop - headerTable.height()) && headerTablePosition == "fixed") 
    {
        headerTable[0].style.left = "0px";
        headerTable[0].style.position = "relative";
        $(dataTable).css("top", "0px");  
        $($(_grid[0].grid.sDiv)).css("top", "0px");  // footer table
        $("#gview_jqGrid").css("height", "100%");  //outermost grid element
    }
});

Answer 3

我想我会提到如何填充缺失的变量。

//grid = $("#yourGrid").jqGrid( ...

dataTable = $(grid[0].grid.bDiv);
footerTable = $(grid[0].grid.sDiv);
headerTable = $(grid[0].grid.hDiv);
//my header column was behind the grid
headerTable.css('z-index', '1000');
setInitializeHeadersAndFootersPosition();