Geek asks and answers

Jqgrid fixed column header and fixed footer

I tried to fix jqgrid column header and fixed footers. When there are other elements along with jqgrid with data, I looked at the caption of the header so that the user knew all the time what he was looking at.

Here is an example of what I'm looking for

Please note that here I am browsing the scrollbar of browsers. Does jqgrid support this?

Edit

Since JQGrid is an html table, I tried using jQuery TH Float Plugin . Now it turns out that JqGrid consists of three tables, One for the header, one for the data, and the other for the footer. Therefore, it seems to me that I need to either modify thfloat to adapt to this, or come up with something else ...

+3
source share
3 answers

It was a tough nut to crack.

I earned First css overrides the default, which is overflow: hidden until

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

In javascript jQuery came to the rescue, I implemented the following

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 });
        }

    });

And then check the footer and header when resizing the window

        $(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
            }
        }
+1
source

I thought I mentioned how to fill the missing vars.

//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();
0
source

Sarat, what a great solution, it helped me a lot. I expanded your work so that the title will only “bounce” once when it is first scrolled from the page / repositioned. After that, the position switches to fixed, but there are many other elements that need compensation. Enjoy it!

$(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
    }
});
0
source

More articles:


All Articles