Question

我有一个简单的子网格作为网格实现，父网格有超过1页。

以下是测试代码：

<!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：false} 和 loadonce：ture

假设您可以更改子网格中的QTY，然后折叠并展开它。子网格不会重新加载本地数据，仍然保留我的更改。

但是，如果我切换到下一页并切换回上一页，子网格将在展开时再次重新加载本地数据。所以，我失去了所有的改变。

有没有人有任何想法和任何解决方法，或者我缺少的东西？请建议我。谢谢。

要测试我的脚本，请单击rowList并使网格首先包含5行并且有2页，因为我不知道如何使页面/容器在本地数据的第一个开头显示5行。如果有人知道该怎么做，那对我来说也是一个奖励。谢谢！

更新我发现它不仅仅是关于页面被更改，它还会在我更改rowList时强制子网格重新加载（页面上显示多少行）。有什么方法可以避免这种行为吗？请。谢谢

Answer 1

首先，我首先创建数据数组，然后将它们直接设置在grid-options中（如this example中所示）。然后行数就可以了，不需要额外的javascript代码来加载。

否则，您必须在添加数据后重新加载网格以正确显示行数：

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

另见reload example。

对于您的主要问题：选项loadonce和寻呼机无法协同工作（请参阅this link）。

解决方法：我认为您必须在每次数据更改后或每次分页之前更改数据变量（例如，您可以使用onPaging - 事件）。

jqGrid - 如果父网格页面改变了，则重新加载子网格？

1 个答案: