开发者

jqGrid tree grid with local data

开发者 https://www.devze.com 2023-03-22 09:46 出处:网络
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.&quo开发者_JS百科t;

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.&quo开发者_JS百科t;

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


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:"".

0

精彩评论

暂无评论...
验证码 换一张
取 消