如何重新加载 JQuery 网格保持滚动位置和折叠元素打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5706703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reload JQuery grid keeping scroll position and collapse elements open
提问by Zion
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.
我目前正在使用用于 struts2 的 JQuery 插件。我想知道如何在不丢失当前滚动位置和折叠行的情况下重新加载 JQuery 网格。
In order to reload the data in the grid I'm using the following javascript code:
为了重新加载网格中的数据，我使用了以下 javascript 代码：
var timerID = setInterval("RefreshGridData()", 5000);
function RefreshGridData() {
$("#griditems").trigger("reloadGrid");
}
The jsp of the grid is the following:
grid的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>
Any comments on how to implement this are welcome.
欢迎任何关于如何实现这一点的评论。
Thanks in advance.
提前致谢。
回答by firegnom
var scrollPosition = 0
function RefreshGridData() {
scrollPosition = jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop()
$("#griditems").trigger("reloadGrid");
}
after data is loaded in event loadComplete
在事件 loadComplete 中加载数据后
jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition)
EDIT :
编辑 ：
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
不确定这是否有效我没有测试它应该是这样的
EDIT
编辑
setGridParam- not suire if it will work on events but you might try that
setGridParam- 不确定它是否适用于事件，但您可以尝试
i couldn't find how to attach subGridRowExpanded topick using tag library in struts but try changing config after grid is constructed by taglibrary
我找不到如何使用 struts 中的标签库附加 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
编辑
ok different aproach :
好的不同的方法：
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");
}
and when load of grid is complete :
当网格加载完成时：
jQuery.each(ids, function (id,data) {
$("#jqgrid_id").expandSubGridRow(data);
jQuery("#griditems").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition);
});
回答by Zion
I finally solved my problem. Thanks to the useful information provided by firegnomin his answer and commentsI got a big push forward to create an implementation of a jQuery grid (with subgrid), using Struts2 tags, which keeps its previous scroll position and expanded/collapsed state after reloading it.
我终于解决了我的问题。感谢firegnom在他的回答和评论中提供的有用信息，我得到了很大的推动，使用 Struts2 标签创建了一个 jQuery 网格（带有子网格）的实现，它在重新加载后保持其先前的滚动位置和展开/折叠状态.
JavaScript
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);
}
I used the isDigitfunction because the first element found with class sgexpandedis always 0 and that is not a valid row number in a grid since rows start counting from 1. Another observation is that I set a timer before calling the setScrollPos function because my grid doesn't have a scroll bar before a certain number of rows are expanded, and since the expanding effect is not immediate, it's necessary to set the scroll position after a certain time.
我使用isDigit函数是因为在类sgexpanded 中找到的第一个元素始终为 0 并且这不是网格中的有效行号，因为行从 1 开始计数。另一个观察结果是我在调用 setScrollPos 函数之前设置了一个计时器，因为我的网格在展开一定数量的行之前没有滚动条，而且由于展开效果不是立竿见影的，所以需要在一定时间后设置滚动位置。
Grid tags code
网格标签代码
<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>
Hope it helps somebody.
希望它可以帮助某人。
Cheers.
干杯。
回答by Morey
To load the page in-place (which keeps curent scroll position) simply use:
要就地加载页面（保持当前滚动位置），只需使用：
$("#mygrid").trigger("reloadGrid",[{current:true}]);
回答by Irfan Soetedja
I've solve the problem by adding this
我通过添加这个解决了这个问题
var offset = $("#" + *subgrid_table_id*).offset();
var w = $(window);
var fromTop = offset.top - w.scrollTop();
$('html, body').animate({
scrollTop: offset.top - fromTop
}, 1);
this code keep the last position of grid
此代码保留网格的最后位置
