javascript 带有本地数据的 jqGrid 树形网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6788727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid tree grid with local data
提问by Konrad Garus
jqGrid docsfor tree grid say: "Currently jqGrid can work only with data returned from server. There are some tricks and articles wich describes how to work with local data."
树形网格的jqGrid 文档说：“目前 jqGrid 只能处理从服务器返回的数据。有一些技巧和文章描述了如何处理本地数据。”
Fair enough, but I was unable to find such articles. Any hints on how I can achieve it, preferably with equivalent of datatype=local?
很公平，但我找不到这样的文章。关于如何实现它的任何提示，最好是等效于datatype=local?
回答by Oleg
Probably thisold answer could help you. The demo which used the last current version of jqGrid you can find here.
可能这个旧答案可以帮助你。您可以在此处找到使用最新当前版本的 jqGrid 的演示。
UPDATED: Now I would be prefer to use datatype: "jsonstring"which is almost the same as datatype: "local". One need to use datastr: mydatainstead of data: mydatain the case. Additionally one have to use jsonReader as function. As the result one will have the following modified demo.
更新：现在我更喜欢使用datatype: "jsonstring"与datatype: "local". 一个需要使用datastr: mydata代替data: mydata的情况下。另外一个必须使用jsonReader 作为 function。结果将有以下修改后的演示。
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:nullinstead of parent:"".
更新 2：应该使用parent:"null"或parent:null代替parent:"".
