Trouble populating data in jqGrid subgrid

问题

I am trying to populate data in the subgrid, but I have trouble doing it. I guess the trouble is that I need to show the data generated from the same URL. Its is nested data. The data is json. I looked around for examples, some specify the need for a jsonreader and some completely omit it. I am very new to jquery and jgrid. I want the header field to be displayed when the item is expanded. The data I get from the server is as below:

{"total":18,"page":1,"records":18,"rows":[
    {"Name":"Jane", "Header":[{"Type":"bundle","Selected":"true"}]}

Here I need to display the information in the Header in the Subgrid. The main grid shows the information in the 'rows'. Each 'rows' has a header information which I need to display when the user clicks on it. I managed to get a display like [object Object], but I think I am missing something. I need to parse the array and display the information : Type and Selected. http://www.trirand.com/blog/?page_id=393/help/subgrid-from-nested-master-grid-data/ is exactly what I am looking for.

Any pointers are greatly appreciated.

Below is a snippet of my code:

$("#grid").jqGrid({
    url: '/requestData',
    datatype: "json",
    colNames:['ID', 'Name'],
    colModel:[
        {name:'ID',index:'ID',sorttype:'int'},         
        {name:'Name',index:'Name', width:450}
    ],
    jsonReader : {
        repeatitems:false,
        root: 'rows'
    },
    loadonce:true,      
    viewrecords: true,
    autowidth: true,
    height: 400,    
    rowNum:999,  
    subGrid: true,
    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" : false
    },
    subGridRowExpanded: function(subgrid_id, row_id) { 
        var subgrid_table_id; 
        subgrid_table_id = subgrid_id+"_t";
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'>"); 
        jQuery("#"+subgrid_table_id).jqGrid({ 
            url: '/requestData', 
            datatype: "json", 
            colNames: ['Header'], 
            colModel: [{
                name:"Header",index:"Header"}
            ], 
            jsonReader: { repeatitems:false,
                          root: "rows" },
            loadonce: true,      
            viewrecords: true,
            rowNum: 999, 
            autowidth: true,
            sortorder: "asc", 
            height: '100%'
        }); 
        jQuery("#"+subgrid_table_id).jqGrid('navGrid',{edit:false,add:false,del:false}) 
   }
});

来源：https://stackoverflow.com/questions/12754798/trouble-populating-data-in-jqgrid-subgrid

标签

jquery

jqgrid

subgrid