jqgrid фиксированный заголовок столбца и фиксированные нижние колонтитулы

Question

Я искал исправление заголовка столбца jqgrid и фиксированных нижних колонтитулов. Когда есть другие элементы вместе с jqgrid с данными, я смотрел на фиксацию заголовка, чтобы пользователь знал все время, на что он смотрит.

Here is the sample for what I am looking for

Обратите внимание, что здесь я смотрю на браузерах полоса прокрутки. Поддерживает ли jqgrid это?

Редактировать

Как JQGrid есть HTML таблицу в конце концов, я пытался использовать jQuery TH Float Plugin. Теперь выясняется, что JqGrid состоит из трех таблиц Один для заголовка, один для данных, а другой для нижнего колонтитула. Поэтому мне кажется, что мне нужно либо модифицировать thfloat, чтобы приспособиться к этому, либо придумать что-то еще ...

Answer 1

Это был крепкий орешек, чтобы взломать.

Я получил это работает на Первый 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

I тыс. ht Я бы упомянул, как заполнить недостающие вары.

//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, какое отличное решение, мне очень помогло. Я расширил вашу работу, так что заголовок будет только «отскакивать» один раз, когда он сначала прокручивается с страницы/перепозиционируется. После этого позиция переключается на фиксированную, но там много других элементов, которые нуждаются в компенсации. Наслаждайтесь!

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