jqGrid子网格数据未显示答案

【问题标题】：jqGrid Subgrid data not showing upjqGrid子网格数据未显示
【发布时间】：2012-09-11 00:33:23
【问题描述】：

我看到有人问过同样的问题，但没有一个问题包含我可以使用的答案。我正在使用 jqgrid 4.4。主网格可以很好地加载数据，在子网格中我可以看到我的 java 控制器的响应，但不知道如何让它显示出来。

function(){ 
        jQuery("#subGrid").jqGrid({ 
            url: CONTEXT_ROOT+"/cartonPremium", 
            id:'gridtable', 
            datatype: "json", 
            height: 190, 
            jsonReader : {
                       root: 'gridModel', 
                       page: 'page',
                       total: 'total',
                       records: 'records',
                       repeatitems: false,      
                       id: '0'                     
             },              
            colNames:['idPremium','Name','Week', 'Departure Region' ],
            colModel:[ 
            {name:'idPremium',hidden:false, width:100},
            {name:'name',index:'name', width:300}, 
            {name:'sequence',index:'sequence', width:90}, 
            {name:'departureRegion',index:'departureRegion',width:100} 
            ], 
            hidegrid: false,
            rowNum:20, 
            rowList:[20,40,80], 
            pager: '#psubGrid', 
            sortname: 'name', 
            viewrecords: true, 
            sortorder: "desc", 
            multiselect: false, 
            sortable: true,
            autowidth: false,
            pagerButtons:true,
            navigator:true,
            //loadonce: true,
            altRows: true,
            viewsortcols: [true,'vertical',true],
            subGrid: true,
            // define the icons in subgrid 
            subGridOptions: { 
                "plusicon" : "ui-icon-triangle-1-e", 
                "minusicon" : "ui-icon-triangle-1-s", 
                "openicon" : "ui-icon-arrowreturn-1-e"//, 
                //expand all rows on load 
                //"expandOnLoad" : true 
            }, 
            subGridRowExpanded: function(subgrid_id, row_id) { 

                var subgrid_table_id, pager_id; 
                subgrid_table_id = subgrid_id+"_t"; 
                pager_id = "p_"+subgrid_table_id; 

                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 

                jQuery("#"+subgrid_table_id).jqGrid({ 
                    url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id, 
                    datatype: "json", 
                    colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
                    colNames:['idCasePackOptions'],
                    colModel: [ 
                        {name:'idCasePackOptions', width:170,hidden:false}      
                    ], 
                    rowNum:8, 
                    pager: pager_id, 
                    sortname: 'idCasePackOptions', 
                    sortorder: "asc", 
                    sortable: true,
                    height: 400 
                }); 
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false}); 
            }   
        }
    );
    jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}

);

这是来自服务器的响应

{"total":1,"page":1,"gridModel":[{"idCasePackOptions":1},{"idCasePackOptions":2},{"idCasePackOptions":3},{"idCasePackOptions":4},{"idCasePackOptions":5},{"idCasePackOptions":6}],"records":6,"rows":8}

救命！！我错过了什么？

【问题讨论】：

标签： jqgrid subgrid

【解决方案1】：

我终于让它开始工作了...yipeee !!!子网格中缺少的魔法

jsonReader: {
  root: 'gridModel',
  repeatitems: false
}

所以工作版本看起来像这样

$(document).ready(
function(){ 
        jQuery("#subGrid").jqGrid({ 
            url: CONTEXT_ROOT+"/cartonPremium", 
            id:'gridtable', 
            datatype: "json", 
            height: '100%' ,
            mtype: 'POST',
            jsonReader : {
                       root: 'gridModel', 
                       page: 'page',
                       total: 'total',
                       records: 'records',
                       repeatitems: false,      
                       id: '0'                
             }, 
            colNames:['idPremium','Name','Week' ],
            colModel:[ 
            {name:'idPremium',hidden:false, width:100},
            {name:'name',index:'name', width:300}, 
            {name:'sequence',index:'sequence', width:90}
            ], 
            hidegrid: false,
            rowNum:20, 
            rowList:[20,40,80], 
            pager: '#psubGrid', 
            sortname: 'name', 
            viewrecords: true, 
            sortorder: "desc", 
            multiselect: false, 
            sortable: true,
            autowidth: false,
            pagerButtons:true,
            navigator:true,
            //loadonce: true,
            altRows: true,
            viewsortcols: [true,'vertical',true],
            subGrid: true,
            // define the icons in subgrid 
            subGridOptions: { 
                "plusicon" : "ui-icon-triangle-1-e", 
                "minusicon" : "ui-icon-triangle-1-s", 
                "openicon" : "ui-icon-arrowreturn-1-e",
                "reloadOnExpand" : true
            }, 
            subGridRowExpanded: function(subgrid_id, row_id) { 
                var subgrid_table_id, pager_id; 
                subgrid_table_id = subgrid_id+"_t"; 
                pager_id = "p_"+subgrid_table_id; 
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 

                jQuery("#"+subgrid_table_id).jqGrid({ 
                    url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id, 
                    datatype: "json", 
                    mtype: 'POST',
                    colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
                    colModel: [ 
                        {name:'idCasePackOptions', width:170,hidden:false}, 
                        {name:'cypharecommended',index:'cypharecommended', width:170},
                        {name:'distributorapproved',index:'distributorapproved', width:170},
                        {name:'height',index:'height', width:100},
                        {name:'length',index:'length', width:80, align:"right"},
                        {name:'statuscode',index:'statuscode', width:90, align:"right"},        
                        {name:'weight',index:'weight', width:100,align:"right"},        
                        {name:'width',index:'width', width:100}     
                    ], 
                    rowNum:8, 
                    pager: pager_id, 
                    sortname: 'idCasePackOptions', 
                    sortorder: "asc",
                    viewrecords: true, 
                    sortable: true,
                    height: '100%' ,
                    autowidth: true,
                    jsonReader: {
                        root: 'gridModel',
                        repeatitems: false
                    }

                }); 
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false}); 
            }
        }
    );
    //jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}

);

【讨论】：

【解决方案2】：

如果您的给定函数之一不存在，您在子网格中的数据也不会显示。所以如果你打错了空行会显示：

afterSave: ReloadSubGrid, onError: UpdateFailed, delOptions:...
...
function ReloadSbuGrid(rowid, response) {
    ...
}

错字：ReloadSbuGrid 应该是 ReloadSubGrid

【讨论】：