jqgrid固定列ヘッダーと固定フッター

Question

私はjqgrid列ヘッダーと固定フッターを修正しようとしていました。データがあるjqgridに他の項目があるとき、私はヘッダーを修正して、ユーザがいつ何を見ているのかを知るようにしていました。ここで私は、ブラウザで探しています

Here is the sample for what I am looking for

注バーをスクロールします。 jqgridはこれをサポートしていますか？

編集

JQGridすべての後、HTMLのテーブルであるため、私はjQuery TH Float Pluginを使用しようとしました。 JqGridが3つのテーブルで構成されていることがわかりました ヘッダー用、データ用、フッター用の1つです。だから私はこれに対応するためにフロートを修正しなければならないか、それとも何か別のものを考えなければならないようだ...

Answer 1

これはひどいナットであった。

私はそれがオーバーフローでデフォルトを上書き まずCSSで作業しました：javascriptのはJQueryで

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

に隠されたが、私の救助に来た私は、次の

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

I thoug ht私は行方不明の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(); 

Answer 3

サラスは、どのような素晴らしい解決策が私をたくさん助けました。私はあなたの仕事を拡大しました。ヘッダーは最初にページからスクロールしたり、位置を変えたりしたときに一度だけ "バウンス"します。その後、位置は固定に切り替わりますが、補償を必要とする他の多くの要素があります。楽しい！

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