I am testing trees in jqgrid, so far I am only able to create something like below
I want to have something like jqGrid Demo page
I came up with the below code, but no idea how should I go about expanding each row in the tree from the given json format
$('<table id="list2" cellspacing="0" cellpadding="0"></table></div>').appendTo('#topics');
var grid = jQuery("#list2");
grid.jqGrid({
datastr:topicjson,
datatype: "jsonstring",
height: "auto",
pager: false,
loadui: "disable",
colNames: ["id","Items","url"],
colModel: [
{name: "id",width:1,hidden:true, key:true},
{name: "elementName", width:150, resizable: false},
{name: "url",width:1,hidden:true}
],
treeGrid: true,
caption: "jqGrid Demos",
ExpandColumn: "elementName",
autowidth: true,
//width: 180,
rowNum: 200,
//ExpandColClick: true,
treeIcons: {leaf:'ui-icon-document-b'},
jsonReader: {
repeatitems: false,
root: "response"
}
});
Json format
var topicjson={
"response": [
{
"id": "1",
"elementName": "Grouping",
"sub": [
{
"subelementName": "Simple Grouping"
},
{
"subelementName": "May be some other grouping"
}
]
},
开发者_如何学运维 {
"id": "2",
"elementName": "CustomFormater",
"sub": [
{
"subelementName": "Image Formatter"
},
{
"subelementName": "Anchor Formatter"
}
]
}
]
};
You try to use Tree Grid with absolutely wrong formatted data. You should see tree grid as a grid with some additional hidden columns which defines the tree structure. The names of the columns depends on the value of the treeGridModel
parameter. I recommend you to use treeGridModel: "adjacency"
. In the case the names of the hidden columns will be:
level, parent, isLeaf, expanded, loaded, icon
In case of treeGridModel: 'nested' there are lft
and rgt
instead of parent
column.
Because every item of the tree (root nodes and all subitems) represents grid's row which will be placed in the grid every item have to have id. In your original version of the topicjson
variable the you defined ids only for the root elements (elements of the level 0).
We can modify your original example to the following:
var topicjson={
"response": [
{
"id": "1",
"elementName": "Grouping",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
},
{
"id": "1_1",
"elementName": "Simple Grouping",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "1_2",
"elementName": "May be some other grouping",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2",
"elementName": "CustomFormater",
level:"0", parent:"", isLeaf:false, expanded:true, loaded:true
},
{
"id": "2_1",
"elementName": "Image Formatter",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2_1",
"elementName": "Anchor Formatter",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
}
]
},
grid;
$('<table id="list2"></table>').appendTo('#topics');
grid = jQuery("#list2");
grid.jqGrid({
datastr: topicjson,
datatype: "jsonstring",
height: "auto",
loadui: "disable",
colNames: [/*"id",*/"Items","url"],
colModel: [
//{name: "id",width:1, hidden:true, key:true},
{name: "elementName", width:250, resizable: false},
{name: "url",width:1,hidden:true}
],
treeGrid: true,
treeGridModel: "adjacency",
caption: "jqGrid Demos",
ExpandColumn: "elementName",
//autowidth: true,
rowNum: 10000,
//ExpandColClick: true,
treeIcons: {leaf:'ui-icon-document-b'},
jsonReader: {
repeatitems: false,
root: "response"
}
});
You can see the results of the modification on the demo here:
In the example I set expanded:true
property for the CustomFormater
node to demonstrate that you can specify which nodes should be directly displayed expanded.
I removed hidden column id
from the tree grid because the id will be saved additionally as the id
attribute of the corresponding <td>
element. If you don't plan to make the column visible I would recommend to place the id
property only in the input data of the tree (in topicjson
).
One more important remark. All grid rows will be filled in exactly the same order in which they are in the input data. So you have to place the child nodes of the node immediately after its parent. I placed the corresponding change request in the trirand forum. So probably the requirement about the strict order of the input data for the tree grid will be changed somewhere later.
UPDATED: To have sorting work correctly one have to use parent:null
or parent:"null"
instead of parent:""
see here for more details.
精彩评论