jqGrid Example

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>
<div id="gridPager"></div>
<br/>
<a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree4.htm">Another local adjaceny example</a>

JavaScript

var mydata = [
    {id: "1", label:"No 1", number:"02200220", status:"OPEN", level:"0", parent: "", isLeaf: false, expanded:true, loaded:true},
    {id: "2", label:"No 2", number:"77733337", status:"ENTERED", level:"0", parent: "", isLeaf: false, expanded:true, loaded:true},
    {id: "6", label:"No 2a", number:"12345123", status:"WIRED", level:"1", parent: "2", isLeaf: true, expanded:false, loaded:true},
    {id: "3", label:"No 3", number:"02200111", status:"OPEN", level:"0", parent: "", isLeaf: false},
    {id: "4", label:"No 1a", number:"02200221", status:"OPEN", level:"1", parent: "1", isLeaf: true, expanded:false, loaded:true},
    {id: "5", label:"No 1b", number:"02242320", status:"CLOSED", level:"1", parent: "1", isLeaf: true, expanded:false, loaded:true}
];

var grid = $("#grid");

grid.jqGrid({
    // data: mydata, // doesn't work
    datatype: "local",
    colNames: ['Id', 'Label', 'Number', 'Status'],
    colModel: [
    { name:'id',index:'id', width:60, sorttype: "int"},
    { name: 'label', index: 'label', width: 180, sorttype: "string"},
    { name: 'number', index: 'number', width: 120, sorttype: "float" },
    { name: 'status', index: 'status', width: 120, sorttype: "string" } ],
    gridview: true,
    loadComplete : function(){
            $(this).jqGrid('hideCol',["id","number"]);
       
        },
    sortname: 'id',
    treeGrid: true,
    loadonce: true,
    treeGridModel: 'adjacency',
    treedatatype: 'local',
    ExpandColumn: 'label',
    height: 'auto',
    pager : "#gridPager",
    caption: "Stack Overflow Adjacency Example"
});


// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});