Как перезагрузить сетку JQuery, оставив открытыми позиции прокрутки и свертывания

Question

В настоящее время я работаю с плагином JQuery для struts2. Я хотел бы знать, как перезагрузить сетку JQuery без потери текущей позиции прокрутки и сворачивания строк.

Для перезагрузки данных в сетке я использую следующий код JavaScript:

var timerID = setInterval("RefreshGridData()", 5000);
function RefreshGridData() {
    $("#griditems").trigger("reloadGrid");
}

JSP сетки является следующим:

<s:url id="itemsurl" action="getItemsJson.action" />
<s:url id="subitemsurl" action="getSubItemsJson.action" />
<sjg:grid id="griditems" caption="Items and Subitems" dataType="json"
    href="%{itemsurl}" pager="false" viewrecords="true" height="400"
    gridModel="gridModel" rowNum="-1" sortable="true">

    <sjg:grid id="gridsubitems" subGridUrl="%{subitemsurl}"
        gridModel="gridModel" rowNum="-1">
        <sjg:gridColumn name="subcol1" index="subcol1" title="SubColumn 1"
            width="120" />
        <sjg:gridColumn name="subcol2" index="subcol2" title="SubColumn 2"
            align="left" width="120" />
    </sjg:grid>

    <sjg:gridColumn name="col1" index="col1" title="Column 1" sortable="true"
        width="80"/>
    <sjg:gridColumn name="col2" index="col2"
        title="Column 2" sortable="true" />
    <sjg:gridColumn name="col3" index="col3" title="Column 3"
        sortable="true" />
</sjg:grid>

Любые комментарии о том, как это реализовать, приветствуются.

Заранее спасибо.

Answer 1

var scrollPosition = 0

function RefreshGridData() {
    scrollPosition = jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop()
    $("#griditems").trigger("reloadGrid");
}

после загрузки данных в событие loadComplete

jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition)

РЕДАКТИРОВАТЬ:

var ids = new Array();


jQuery("#jqgrid_id").jqGrid({
...
   gridComplete: function(){ 
      var rowIds = $("#jqgrid_id").getDataIDs();
      $.each(ids, function (index, data) {
        if (data == 1){
           $("#jqgrid_id").expandSubGridRow(rowId); 
        }
      });
   },
   subGridRowExpanded: function(pID, id){ 
      ids[id] = 1;
   },
   subGridRowColapsed: function(pID, id){ 
      ids[id] = 0;
   },

...
});

не уверен, что это сработает, я не проверял, но должно быть что-то вроде этого

РЕДАКТИРОВАТЬ

setGridParam - не подходит, если он будет работать с событиями, но вы можете попробовать это

Я не смог найти, как прикрепить subGridRowExpanded topick, используя библиотеку тегов в структурах, но попробуйте изменить конфигурацию после построения сетки по taglibrary

$("#griditems").setGridParam({subGridRowExpanded: function(pID, id){ ids[id] = 1;}});
$("#griditems").setGridParam({subGridRowColapsed: function(pID, id){ ids[id] = 0;}});
$("#griditems").setGridParam({gridComplete: function(){ 
      var rowIds = $("#jqgrid_id").getDataIDs();
      $.each(ids, function (index, data) {
        if (data == 1){
           $("#jqgrid_id").expandSubGridRow(rowId); 
        }
      });
   }});

EDIT

ок, другой подход:

var scrollPosition = 0
var ids = new Array();

function RefreshGridData() {
        ids = new Array();
        $('tr:has(.sgexpanded)').each(function(){ids.push($(this).attr('id'))});
        scrollPosition = jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop()
        $("#griditems").trigger("reloadGrid");
    }

и когда загрузка сетки завершена:

jQuery.each(ids, function (id,data) {
           $("#jqgrid_id").expandSubGridRow(data);
           jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition);
      });

Answer 2

Я решил проблему, добавив

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

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

Answer 3

Чтобы загрузить страницу на месте (которая сохраняет текущее положение прокрутки), просто используйте:

Answer 4

Я наконец решил свою проблему. Благодаря полезной информации, предоставленной firegnom в его ответе и комментариях я получил большой толчок для создания реализации сетки jQuery (с подсеткой), используя теги Struts2, которые сохраняют свою прежнюю позицию прокрутки и развернутое / свернутое состояние после перезагрузки.

JavaScript

var scrollPosition = 0;
    var ids;
    var timerID = setInterval("RefreshGridData()", 5000);



function RefreshGridData() {
    var num;
    ids = new Array();  
    scrollPosition = jQuery("#testgrid").closest(".ui-jqgrid-bdiv").scrollTop();            
    jQuery("#testgrid tr:has(.sgexpanded)").each(function(){
        num = $(this).attr('id');
        if (isDigit(num)) {         
            ids.push(num);
        }
    }); 
    $("#testgrid").trigger("reloadGrid");           
}               

function isDigit(num) {         
    if (num.length > 1){return false;}                                  
    if (num > 0 && num < 20) {return true;}     
    return false;
}


$(document).ready(function () {         
$.subscribe('testgridReloded', function(event, element) {   
    var i;
    for (i = 0; i < ids.length; i = i+1) {                  
        $("#testgrid").jqGrid('expandSubGridRow', ids[i]);
    }    



    var t = setTimeout("setScrollPos()", 300);
    });
}); 



function setScrollPos() {
    jQuery("#testgrid").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition);
}

Я использовал функцию isDigit , поскольку первый элемент, найденный с классом sgexpanded , всегда равен 0, и это недопустимый номер строки в сетке, поскольку строки начинают отсчитываться от 1. Другой Наблюдение состоит в том, что я установил таймер перед вызовом функции setScrollPos, потому что моя сетка не имеет полосы прокрутки до того, как определенное количество строк развернуто, и, поскольку эффект расширения не является немедленным, необходимо установить положение прокрутки после определенного время.

Сетка тегов код

<s:url id="gridurl" action="getJsonGridData.action" />

<sjg:grid id="testsubgrid" subGridUrl="%{subgridurl}"
    gridModel="gridModel" rowNum="-1" >
    <sjg:gridColumn name="sub1" index="sub1" title="Sub Col 1"
        width="80" />
    <sjg:gridColumn name="sub2" index="sub2" title="Sub Col 2"
        align="left" width="80" />
</sjg:grid>

<sjg:gridColumn name="col1" index="col1" title="Grid Col 1" sortable="true" width="120" />
<sjg:gridColumn name="col2" index="col2" title="Grid Col 2" width="120" />
<sjg:gridColumn name="col3" index="col3" title="Grid Col 3 width="120" />
</sjg:grid>

Надеюсь, это кому-нибудь поможет.

Приветствие.