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 - 如果它可以处理事件但你可能会尝试

我找不到如何在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); });

Answer 2

我终于解决了我的问题。感谢firegnom中 his answer and comments 提供的有用信息，我大力推动使用Struts2标记创建jQuery网格（带子网格）的实现重新加载后，它先前的滚动位置和展开/折叠状态。

<强> 的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>

希望它对某人有帮助。

干杯。

Answer 3

要在适当位置加载页面（保持固定滚动位置），只需使用：

$("#mygrid").trigger("reloadGrid",[{current:true}]);

Answer 4

我通过添加此

解决了这个问题

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

此代码保留网格的最后位置

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

4 个答案: