如何重新加载JQuery网格,保持滚动位置和折叠元素打开

Question

我目前正在使用struts2的JQuery插件.我想知道如何在不丢失当前滚动位置和折叠行的情况下重新加载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 - 如果它可以在事件上工作但不是suire,你可能会尝试

我找不到如何在struts中使用标记库附加subGridRowExpanded topick但是在taglibrary构造网格后尝试更改config

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

编辑

确定不同的方法:

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