jqGrid - 상위 그리드 페이지가 변경된 경우 subgrid가 다시로드됩니까?

그리드 구현으로 간단한 subgrid가 있고 상위 gird에 1 페이지 이상이 있습니다.jqGrid - 상위 그리드 페이지가 변경된 경우 subgrid가 다시로드됩니까?

<!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 : ture

Subgrid에서 수량을 변경 한 다음 축소하고 확장 할 수 있습니다. subgrid는 로컬 데이터를 다시로드하지 않고 여전히 변경 사항을 유지합니다.

그러나 다음 페이지로 변경하고 이전 페이지로 다시 전환하면 하위 데이터를 확장하면 하위 데이터가 다시로드됩니다. 그래서 모든 변화를 잃었습니다.

누구나 아이디어와 해결 방법이 있습니까, 아니면 제가 빠진 것입니까? 제발 조언 해주세요. 고맙습니다.

내 스크립트를 테스트하려면 rowList를 클릭하고 그리드에 5 행이 먼저 포함되고 2 페이지가 있어야합니다. 페이지/컨테이너가 맨 처음부터 5 행을 로컬로 표시하는 방법을 모르기 때문에 데이터. 아무도 그것을하는 방법을 안다면 나에게도 보너스가 될 것입니다. 감사!

업데이트 : 나는 페이지가 변경되었습니다에 대해 내가 rowList을 (얼마나 많은 행이 페이지에 표시) 변경 때, 그것은 또한 아 격자를 다시로드를 강제뿐만 아니라 것 알아 냈어. 이 문제를 방지 할 수있는 방법이 있습니까? 부디. 고마워요

출처

2012-01-11 early

먼저 데이터 배열을 만들고 직접 grid-options (예 : this example)에 설정합니다. 그런 다음 행 수가 좋으며 로딩을위한 추가 자바 스크립트 코드가 필요하지 않습니다.

그렇지 않으면 제대로 데이터를 추가 한 후 행의 수를 가지고 그리드를 다시로드해야합니다 :

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

는 또한이 reload example를 참조하십시오. 주요 질문에 대한

: 옵션 loadonce 및 호출기 함께 (this link 참조) 작동하지 않습니다.

해결 방법 : 각 데이터 변경 후 또는 각 페이징 (예 : onPaging -event를 사용할 수 있음) 전에 데이터 변수를 변경해야한다고 생각합니다.

출처

2012-01-12 08:07:35 scessor

나를 고쳐 주셔서 감사합니다. 주요 문제는 내 실제 그리드가 XML을 통해 데이터를 가져오고 사용자가 '저장'을 클릭 할 때 모든 변경 사항을 한 번에 저장해야하므로 서버 변경 사항을 여기에서 업데이트 할 수는 없습니다. 이제는 subgrid loadComplete 이후에 변경 사항을 다시 subgrid로로드하는 방법을 연구 중입니다. – early

또는 subgrid에 이미 "loadonce"가있는 경우 서버에서 오히려 locol에서 내 변경 사항을로드하도록 subgrid를 강제 실행하십시오. 이는 url 및 datatype이 런타임에 변경 될 수 있기 때문입니다. – early

드디어 픽스를 관리했습니다. 개념은 Subgrid가 확장 될 때 parent_rowid에 해당하는 배열을 설정 한 다음 서버의 데이터를 subgrid loadComplete 이벤트에 저장하고 모든 변경 사항을이 배열에 유지하는 것입니다.동일한 서브 그리드를 확장하면 서버 대신 로컬 어레이에서 데이터를로드하도록 서브 그리드를 지시합니다. @ 센 서, 지침을 주셔서 감사합니다. – early

jqGrid - 상위 그리드 페이지가 변경된 경우 subgrid가 다시로드됩니까?

답변

관련 문제