jqgrid feste Spaltenüberschrift und feste Fußzeilen

Question

Ich suchte, um die jqgrid Spaltenüberschrift und feste Fußzeilen zu beheben. Wenn es andere Elemente zusammen mit jqgrid mit Daten gibt, habe ich versucht, den Header so zu fixieren, dass der Benutzer jederzeit weiß, was er gerade sieht.

Here is the sample for what I am looking for

Bitte beachte, dass ich hier bei Browsern Suche Scrollbar. Unterstützt jqgrid dies?

bearbeiten

Als jqGrid HTML-Tabelle, nachdem alle, habe ich versucht, jQuery TH Float Plugin zu verwenden. Jetzt stellt sich heraus, dass JqGrid aus drei Tabellen besteht Eins für den Header, einen für die Daten und den anderen für die Fußzeile. So scheint es, dass ich thfloat entweder modifizieren muss, um das unterzubringen oder etwas anderes zu finden ...

Answer 1

Dies war eine harte Nuss zu knacken.

Ich habe es funktioniert durch Erste css die Standardeinstellung überschreibt, den Überlauf: versteckt

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

Auf der Javascript JQuery zu meiner Rettung kam ich folgende

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

    }); 

umgesetzt und dann Überprüfen Sie die Fußzeile und die Kopfzeile, während Sie die Größe des Fensters ändern.

 $(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

I thoug Ich würde erwähnen, wie man die fehlenden Vars bevölkert.

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

Answer 3

Sarath, was für eine großartige Lösung, hat mir sehr geholfen. Ich habe Ihre Arbeit erweitert, so dass die Kopfzeile nur einmal "springt", wenn sie zuerst von der Seite gescrollt/neu positioniert wird. Danach wird die Position auf "Fixed" gesetzt, aber da sind viele andere Elemente, die eine Kompensation benötigen. Genießen!

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