スクロール位置と折り畳み要素を保持してJQueryグリッドを再ロードする方法

Question

現在、struts2用のJQueryプラグインを使用しています。私は現在のスクロール位置を失うことなくJQueryグリッドを再ロードし、行を折りたたむ方法を知りたいと思います。

私は、次のJavaScriptコードを使用していますグリッド内のデータを再ロードするために：グリッドのJSPは以下の通りです

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

：

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

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

... 
}); 

わからない、これは私がテストしていない動作する場合、それはのようなものでなければなりませんツタンカーメンその

EDIT

setGridParam - それはイベントで動作しますが、あなたは

私はどのように支柱にタグライブラリを使用してtopick subGridRowExpanded添付する見つけることができなかったことをしようとしたが、グリッドをすることによって構築された後に変更する設定を試す可能性がある場合suireありませんタグライブラリ

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

と負荷が完了している：

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

Answer 2

私はようやく私の問題を解決しました。 firegnomhis 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); 
} 

クラスで見つかった最初の要素はをsgexpandedので、私はisDigit関数を使用常に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); 

を追加することで問題を解決してきましたが、最後の位置をキープグリッドの