您编写了一些简单的小错误,但您遇到的主要问题是您的代码是为了添加简单的行而不是树节点。你可以继续官方演示页面并在“New in version 3.4”下选择演示“Tree Grid Adjacency model”。
I wrote the demo其工作原理与 trirand 演示页面中的演示完全相同,但是仅使用本地数据:
在你的情况下,你必须从以下位置扩展对象mydata
与属性level
, parent
, isLeaf
, expanded
:
var mydata = [
{id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
level:"0", parent:"", isLeaf:false, expanded:false},
{id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
level:"1", parent:"1", isLeaf:false, expanded:false},
{id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
level:"2", parent:"1_1", isLeaf:true, expanded:false},
{id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
level:"1", parent:"1", isLeaf:true, expanded:false},
{id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
level:"0", parent:"", isLeaf:false, expanded:true},
{id:"2_1",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
level:"1", parent:"2", isLeaf:true, expanded:false},
{id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
level:"1", parent:"2", isLeaf:true, expanded:false},
{id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
level:"0", parent:"", isLeaf:false, expanded:false},
{id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
level:"1", parent:"3", isLeaf:true, expanded:false},
{id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
level:"1", parent:"3", isLeaf:true, expanded:false}
];
这里我修改了一些 id 值,因为 ids 中不应该使用点。另外我设置了expanded
“主菜单1”的状态true
仅演示您可以在加载后立即自动展开某些节点。
我将 jqGrid 定义修改为以下内容
$("#treegridsamp").jqGrid({
datatype: "local",
data: mydata, // will not used at the loading,
// but during expanding/collapsing the nodes
colNames:['id','Name','MenuId','Menu Name'],
colModel:[
{name:'id',index:'id',width:100,hidden:true},
{name:'Name',index:'Name',width:150},
{name:'MenuId',index:'MenuId',width:100},
{name:'MenuName',index:'MenuName',width:100}
],
height:'auto',
//pager : "#ptreegrid",
sortname: 'id',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'Name',
caption: "Sample Tree View Model"
});
我隐藏了“id”列并减小了网格大小。添加我使用的数据addJSONData
方法,因为它将设置树节点
$("#treegridsamp")[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
结果你会收到
您可以现场观看演示here.
UPDATED:如果您使用 jqGrid 版本 4.0 或更高版本,设置很重要loaded:true
如果需要,树节点的属性已扩展。例如,在上面的示例中,“Main Menu1”项是一个节点 (isLeaf:false
)应扩展显示(expanded:true
),所以应该添加loaded:true
对于项目定义:
{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",
level:"0", parent:"", isLeaf:false, expanded:true, loaded:true}
更多示例请参见here, here, here and here.
更新2:要正确进行排序工作,必须使用parent:null
or parent:"null"
代替parent:""
see here更多细节。