如何重新加载 JQuery 网格保持滚动位置和折叠元素打开 [英] How to reload JQuery grid keeping scroll position and collapse elements open

问题描述

我目前正在为 struts2 使用 JQuery 插件.我想知道如何在不丢失当前滚动位置和折叠行的情况下重新加载 JQuery 网格.

I'm currently working with JQuery plugin for struts2. I would like to know how to reload a JQuery grid without loosing the current scroll position and collapse rows.

为了重新加载网格中的数据，我使用了以下 javascript 代码:

In order to reload the data in the grid I'm using the following javascript code:

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

grid的jsp如下:

The jsp of the grid is the following:

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

欢迎对如何实现这一点提出任何意见.

Any comments on how to implement this are welcome.

提前致谢.

推荐答案

var scrollPosition = 0

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

在 loadComplete 事件中加载数据后

after data is loaded in event 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;
   },

...
});

不确定这是否可行我没有测试它应该是这样的

not sure if this will work i didn't test it tut it should be something like that

编辑

setGridParam - 不确定它是否适用于事件，但您可以尝试一下

setGridParam - not suire if it will work on events but you might try that

我找不到如何在 struts 中使用标签库附加 subGridRowExpanded 来选择，但尝试在标签库构建网格后更改配置

i couldn't find how to attach subGridRowExpanded topick using tag library in struts but try changing config after grid is constructed by 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); 
        }
      });
   }});

编辑

好的不同的方法:

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

这篇关于如何重新加载 JQuery 网格保持滚动位置和折叠元素打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！