Как сохранить горизонтальную позицию прокрутки jqGrid при редактировании inline?

Question

У меня на странице есть таблица jqGrid с большим количеством столбцов, поэтому сетка шире, чем окно браузера, появляется горизонтальная полоса прокрутки.

Проблема заключается в том, что когда пользователь нажимает на строку, чтобы начать редактирование, фрейм браузера прокручивается влево, что приводит пользователя в замешательство и даже иногда скрывает выбранную ячейку.

Я попробовал методы, которые я нашел здесь и здесь , но они не работают для меня - я могу восстановить текущую позицию прокрутки, но я могу ' установить это. Ячейки установлены как редактируемые в columnsModel, поэтому я получаю позицию прокрутки в событии formatCell и пытаюсь установить позицию прокрутки в afterEditCell с помощью следующего кода:

afterEditCell: function(rowid, cellname, value, irow, icol) { 

 jQuery("#list").closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
 window.scrollTo(scrollPosition,0);
 if (window.pageXOffset) {window.pageXOffset = scrollPosition;};
 if (document.body.parentElement) {document.body.parentElement.scrollLeft = scrollPosition;};   
 if (document.body) {document.body.scrollLeft = scrollPosition;};

И это никак не влияет на поведение сетки - она ​​прокручивается в крайнее левое положение.

Есть ли другие способы реализовать это?

Answer 1

попробуйте это в функции loadComplete

var offset = $("#" + *subgrid_table_id*).offset();
var w = $(window);
var fromTop = offset.top - w.scrollTop();
$('html, body').animate({
    scrollTop: offset.top - fromTop
}, 1);

этот код сохраняет последнюю позицию сетки

Answer 2

@ Андрус - зачем тайм-аут? В любом случае я реализовал ваш код в своем решении.

Встроенное редактирование со страницы jqgrid:

onSelectRow: function(id){
    if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
    }
    jQuery('#grid_id').editRow(id, true); 
},

Моя версия с прокруткой, которая не «прыгает» влево:

onSelectRow: function(id){
    scrollPosition = jQuery('#grid_id').closest(".ui-jqgrid-bdiv").scrollLeft();
    if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
    }
    jQuery('#grid_id').editRow(id, true).scrollLeft(scrollPosition); 
},

Answer 3

onSelectRow: function(rowid, status, e){
  if (lastID) grid.jqGrid("restoreRow", lastID);

  if (rowid !== lastID) {
    var scrollPosition = grid.closest(".ui-jqgrid-bdiv").scrollLeft();

    grid.jqGrid("editRow", rowid, false, function(){
      setTimeout(function(){ $("input, select", e.target).focus(); }, 10);
    });

    setTimeout(function(){ grid.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition); }, 0);

    lastID = rowid;
  }
  else lastID = null;
}

Answer 4

переместить код прокрутки в setTimeout () как:

setTimeout (function () {grid2.closest (". Ui-jqgrid-bdiv"). ScrollLeft (scrollPosition);}, 100);