jqgrid固定列标题和固定页脚

问题描述：

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

Here is the sample for what I am looking for

请注意，我在这里看着浏览器滚动条。 jqgrid是否支持这个？

编辑

由于jqGrid的是HTML表格毕竟，我试图用jQuery TH Float Plugin。现在事实证明，JqGrid由三个表格组成一个用于标题，一个用于数据，另一个用于页脚。所以看来，我要么修改thfloat来适应这个问题，要么拿出别的东西......

确实[此帖]（http://stackoverflow.com/questions/6534284/fixed-html-table-header-while-scrolling）解决您的情况还是给你的想法对解决呢？ – veeTrain 2012-04-18 11:58:55

我从JQuery TH Float Plugin得到了一些想法。看起来，由于我必须处理三张表，我将不得不自定义插件或想出一些我自己的东西。 – Sarath 2012-04-18 13:13:19

答

这是一个难以突破的坚果。

我得到了它的第一个CSS工作覆盖默认是溢出：隐藏到

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

jQuery的拯救了我的JavaScript我采取了以下

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

答

我thoug我会提及如何填补遗漏的变数。

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

答

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

jqgrid固定列标题和固定页脚

相关推荐