javascript - jqGrid tree grid with local data

Question

jqGrid docs for tree grid says:

"Currently jqGrid can work only with data returned from server. There are some tricks and articles which describes how to work with local data."

Fair enough, but I was unable to find such articles. Any hints on how I can achieve it, preferably with equivalent of datatype=local?

Answer 1

Probably this old answer could help you. The demo which used the last current version of jqGrid you can find here.

UPDATED: Now I would be prefer to use datatype: "jsonstring" which is almost the same as datatype: "local". One need to use datastr: mydata instead of data: mydata in the case. Additionally one have to use jsonReader as function. As the result one will have the following modified demo.

The corresponding code of the demo you find below

var mydata = [
    { id:"1", name:"Cash",   num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
      level:"0", parent:"",  isLeaf:false, expanded:false, loaded:true },
    { id:"2", name:"Cash 1", num:"1",   debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
      level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
    { id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
      level:"2", parent:"2", isLeaf:true,  expanded:false, loaded:true },
    { id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
      level:"1", parent:"1", isLeaf:true,  expanded:false, loaded:true },
    { id:"5", name:"Bank's", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
      level:"0", parent:"",  isLeaf:false, expanded:true, loaded:true },
    { id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
      level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
    { id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
      level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
    { id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
      level:"0", parent:"",  isLeaf:true,  expanded:false, loaded:true }
    ],
    grid = $("#treegrid");

grid.jqGrid({
    datatype: "jsonstring",
    datastr: mydata,
    colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
    colModel:[
        {name:'id', index:'id', width:1, hidden:true, key:true},
        {name:'name', index:'name', width:180},
        {name:'num', index:'acc_num', width:80, align:"center"},
        {name:'debit', index:'debit', width:80, align:"right"},
        {name:'credit', index:'credit', width:80,align:"right"},
        {name:'balance', index:'balance', width:80,align:"right"},
        {name:'enbl', index:'enbl', width: 60, align:'center',
         formatter:'checkbox', editoptions:{value:'1:0'},
         formatoptions:{disabled:false}}
    ],
    height: 'auto',
    gridview: true,
    rowNum: 10000,
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'name',
    caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
});

UPDATED 2: One should use parent:"null" or parent:null instead of parent:"".