2012-01-11 14 views
2

グリッドとして単純なサブグリッドが実装されており、親グリッドには1ページ以上あります。jqGrid - 親グリッドページが変更された場合、サブグリッドがリロードされますか?

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css"/> 
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery-ui.js"></script> 
    <script type="text/javascript" src="js/grid.locale-en.js" ></script> 
    <script type="text/javascript" src="js/jquery.jqGrid.min.js" ></script>  
</head> 
<body> 
    <table id="grid1"> 
    <div id="pager1"></div> 
    </table> 

    <script type="text/javascript">  
     jQuery("#grid1").jqGrid({ 
     datatype: "local", 
     height: 250, 
     rowNum:5, 
     rowList:[5,10,15], 
     cellEdit:true, 
     cellsubmit: 'clientArray', 
     pager: '#pager1', 
     colNames:['Inv No', 'Client','Notes','Checked?' ], 
     colModel:[ 
     {name:'id',index:'id', width:60, sortable:false}, 
     {name:'name',index:'name', width:100, sortable:false}, 
     {name:'note',index:'note', width:150, sortable:false, editable:true}, 
     {name:'ind_checked',index:'ind_checked', width:100, sortable:false, align:'center', editable:true, 
      edittype:'checkbox', editoptions: { value:"Yes:No" }, formatter:'checkbox'} 
     ], 
     caption: "Testing", 
     loadonce: true, 
     subGrid : true, 
     subGridOptions: { reloadOnExpand : false}, 
     subGridRowExpanded: function(subgrid_id, parent_rowid) { 
      subgrid_table_id = subgrid_id+"_t"; 
      subgrid_pager_id = 'p_'+subgrid_table_id; 
      jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table><div id='" + subgrid_pager_id + "'></div>"); 
      jQuery("#"+subgrid_table_id).jqGrid({ 
       datatype: "local", 
       height: "100%", 
       cellEdit:true, 
       cellsubmit: 'clientArray', 
       pager: '#'+subgrid_pager_id, 
       colNames:['Inv No','Item No', 'Qty'], 
       colModel:[ 
        {name:'id',index:'id', width:60, sortable:false}, 
        {name:'icode',index:'icode', width:60, sortable:false}, 
        {name:'qty',index:'qty', width:100, sortable:false, editable:true} 
       ], 
       loadonce: true, 
       loadComplete : function() { 
        var dataIds = $('#grid1').jqGrid('getDataIDs'); 
        var data = $('#grid1').jqGrid('getRowData',dataIds[parent_rowid-1]); 
        loadDetail(data.id); 
       } 
      }); 
     } 
     }).navGrid('#pager1'); 

     var mydata = [ 
     {id:"1",name:"test1",note:"note1",ind_checked:"yes"}, 
     {id:"2",name:"test2",note:"note2",ind_checked:"no"}, 
     {id:"3",name:"test3",note:"note3",ind_checked:"yes"}, 
     {id:"4",name:"test4",note:"note4",ind_checked:"yes"}, 
     {id:"5",name:"test5",note:"note5",ind_checked:"no"}, 
     {id:"6",name:"test6",note:"note6",ind_checked:"no"}, 
     {id:"7",name:"test7",note:"note7",ind_checked:"yes"}, 
     {id:"8",name:"test8",note:"note8",ind_checked:"no"}, 
     {id:"9",name:"test9",note:"note9",ind_checked:"no"} ] 
     ; 

     for(var i=0;i<mydata.length;i++) { 
      jQuery("#grid1").jqGrid('addRowData',i+1,mydata[i]); 
     } 

     var mySGdata = [ 
     {id:"1",icode:"item1",qty:10}, 
     {id:"1",icode:"item2",qty:10}, 
     {id:"3",icode:"item1",qty:10}, 
     {id:"3",icode:"item2",qty:10}, 
     {id:"3",icode:"item3",qty:10}, 
     {id:"4",icode:"item2",qty:10}, 
     {id:"7",icode:"item1",qty:10}, 
     {id:"7",icode:"item3",qty:10}, 
     {id:"9",icode:"item3",qty:10} ] 
     ; 

     function loadDetail(id) { 
      for (var i=0; i<mySGdata.length; i++) { 
       if (mySGdata[i].id==id) { 
        //alert('Add subgridRow'); 
        jQuery("#"+subgrid_table_id).jqGrid('addRowData',i+1,mySGdata[i]); 
       } 
      } 
     } 
    </script> 
</body> 
</html> 

問題は、親グリッドは、ページを変更した場合サブグリッドも私はsubGridOptionsのオプションを追加し、ローカルデータを再ロードしますである:{reloadOnExpand:偽}

は、以下のテストのためのコードでありますloadonce:トゥーレ

は、あなたがサブグリッドにQTYを変更し、それを折りたたんだり展開することができ、さんは言ってみましょう。サブグリッドはローカルデータをリロードせず、変更を保存しています。

ただし、次のページに切り替えて前のページに戻った場合、サブグリッドは展開時にローカルデータを再度読み込みます。だから、私はすべての変更を失った。

誰もが何らかのアイデアや回避策を持っているのか、あるいは何かが足りないのですか?私に助言してください。ありがとうございました。

私のスクリプトをテストするには、rowListをクリックしてグリッドに5行が最初にあり、2ページがあることを確認してください。データ。 誰かがそれを行う方法を知っていれば、私にもボーナスになるでしょう。ありがとう!

更新: を、私はそれがないだけだページについて考え出しが変更された私はrowListを(ページに表示する行数)を変更するとき、それはまた、サブグリッドリロードを強制します。 この現象を回避する方法はありますか?お願いします。ありがとう

答えて

2

最初にデータ配列を作成し、グリッドオプションで直接設定します(this exampleなど)。その後、行の数はOKであり、ロードのための追加のJavaScriptコードは必要ありません。

そうしないと、正しくデータを追加した後の行数を持つようにグリッドをリロードする必要があります。

jQuery("#grid1").trigger("reloadGrid"); 

はまた、このreload exampleを参照してください。オプションloadonceとページャ一緒に動作しません(this linkを参照してください):あなたの主な質問へ


回避策:各データ変更後または各ページングの前にデータ変数を変更する必要があると思います(例:onPaging -eventを使用できます)。

+0

私を修正していただきありがとうございます。主な問題は、私の実際のグリッドがxmlを介してデータを取得しているため、ユーザーが「保存」をクリックしたときにすべての変更を1つのバッチに保存する必要があるためです。今、私は、サブグリッドloadCompleteの後にサブグリッドに変更をロードする方法に取り組んでいます。 – early

+0

、またはサブグリッドがすでに "loadonce"を持っている場合は、実行時にURLとデータ型を変更できるので、サーバーからではなくlocolからの変更をloadするようにsubgridに強制します。 – early

+0

私は最終的に修正プログラムを管理しました。概念は、サブグリッドが展開されたときにparent_rowidに対応する配列を設定し、サーバーからのデータをサブグリッドloadCompleteイベントに格納し、すべての変更をこの配列に保持することです。同じサブグリッドを展開すると、サーバーの代わりにローカル配列からデータをロードするようにサブグリッドに指示しました。 @ scessor、私に方向性を導いてくれてありがとう。 – early

関連する問題