working jqGrid Example

by ironicmuffin

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

<button id="btn">Generate</button>

<ul id="results"></ul>

JavaScript

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

var subgridData = [];
subgridData [0] = { };
subgridData [0]["id"] = 2345;
subgridData [0]["name"] = 'Mike';


var subgridOpts = {
    colNames: ["Inv", "Name"],
    colModel: [{
        name: 'id',
        index: 'id',},
       {
           name: 'name',
           index: 'name'}],
    
    multiselect: true
};

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example",
    subGrid: true,
    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'></table>");            
        
        var func = function() {
           $("#"+subgrid_table_id).jqGrid('addRowData', i + 1,subgridData);    
           $("#" + subgrid_table_id).find(".ui-th-column").hide();
           $("#" + subgrid_table_id).hideCol('cb');
        };
        
        $.extend(subgridOpts, { loadComplete: func });
        
           $("#"+subgrid_table_id).jqGrid(subgridOpts);
           
    }
   
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <=...