我正在尝试使用json数据创建树
我有:
json数据:
{
"page":"1",
"total":4,
"records":36,
"rows":{
"1":{
"taxonomy_id":"1",
"taxonomy_type_id":"product",
"parent_id":null,
"name":"Agriculture",
"slug":"agriculture",
"description":"Agriculture",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":null,
"level":1,
"is_leaf":true
},
"4":{
"taxonomy_id":"4",
"taxonomy_type_id":"product",
"parent_id":"1",
"name":"Rice",
"slug":"rice",
"description":"Rice",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":"Agriculture",
"level":2,
"is_leaf":true
},
"5":{
"taxonomy_id":"5",
"taxonomy_type_id":"product",
"parent_id":"1",
"name":"Apples",
"slug":"apples",
"description":"Apples",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":"Agriculture",
"level":2,
"is_leaf":true
},
"6":{
"taxonomy_id":"6",
"taxonomy_type_id":"product",
"parent_id":"1",
"name":"Olive Oil",
"slug":"olive-oil",
"description":"Olive Oil",
"sort_order":"0",
"is_visible":"1",
"data":"",
"parent_name":"Agriculture",
"level":2,
"is_leaf":true
},
"2":{
"taxonomy_id":"2",
"taxonomy_type_id":"product",
"parent_id":null,
"name":"Apparel",
"slug":"apparel",
"description":"Apparel",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":null,
"level":1,
"is_leaf":true
},
"7":{
"taxonomy_id":"7",
"taxonomy_type_id":"product",
"parent_id":"2",
"name":"Clothes",
"slug":"clothes-2",
"description":"Clothes",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":"Apparel",
"level":2,
"is_leaf":true
},
"8":{
"taxonomy_id":"8",
"taxonomy_type_id":"product",
"parent_id":"7",
"name":"Men's Clothing",
"slug":"mens-clothing",
"description":"Men's Clothing",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":"Clothes",
"level":3,
"is_leaf":true
},
"3":{
"taxonomy_id":"3",
"taxonomy_type_id":"product",
"parent_id":null,
"name":"Automobiles & Motorcycles",
"slug":"automobiles-motorcycles",
"description":"Automobiles & Motorcycles",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":null,
"level":1,
"is_leaf":true
},
"9":{
"taxonomy_id":"9",
"taxonomy_type_id":"product",
"parent_id":null,
"name":"Hardware",
"slug":"hardware",
"description":"Hardware",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":null,
"level":1,
"is_leaf":true
},
"10":{
"taxonomy_id":"10",
"taxonomy_type_id":"product",
"parent_id":null,
"name":"Computer Hardware & Software",
"slug":"computer-hardware-software",
"description":"Computer Hardware & Software",
"sort_order":"0",
"is_visible":"1",
"data":null,
"parent_name":null,
"level":1,
"is_leaf":true
}
}
}
像这样的javascript代码:
/* grid */
$('#the-grid').jqGrid({
url: SITE_URL+'/admin/taxonomy/taxo_data/category',
datatype: 'json',
mtype: 'GET',
colNames:['ID', 'Parent ID', 'Parent', 'Name', 'Description', 'Machine Code', 'Sort Order', 'Is Visible', 'Data', 'Type'],
colModel:[
{name:'taxonomy_id',index:'taxonomy_id', width:15, jsonmap: 'taxonomy_id'},
{name:'parent_id',index:'parent_id', width:15, jsonmap: 'parent_id'},
{name:'parent_name',index:'parent_name', width:15, jsonmap: 'parent_name'},
{name:'name',index:'name', width:15, jsonmap: 'name'},
{name:'description',index:'description', width:15, jsonmap: 'description'},
{name:'slug',index:'slug', width:15, jsonmap: 'slug'},
{name:'sort_order',index:'sort_order', width:15, jsonmap: 'sort_order', align: 'right'},
{name:'is_visible',index:'is_visible', width:15, jsonmap: 'is_visible', formatter: boolFormatter, unformat: boolUnFormatter, formatoptions: {iconTrue: 'ui-icon-check', iconFalse: 'ui-icon-minus'}, align:'center'},
{name:'data',index:'data', width:15, jsonmap: 'data', hidden:true},
{name:'taxonomy_type_id',index:'taxonomy_type_id', width:15, jsonmap: 'taxonomy_type_id', hidden:true}
],
editurl:SITE_URL+'/admin/taxonomy/taxo_crud',
rowNum: 10,
rowList: [10, 25, 50, 75, 100],
pager: '#the-grid-pager',
autowidth: true,
sortname: 'taxonomy_id',
sortorder: 'ASC',
height: 400,
viewrecords: true,
treeGridModel:'adjacency',
caption: 'Taxonomy Items',
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "",
id: "taxonomy_id"
}
});
$('#the-grid').jqGrid('navGrid','#the-grid-pager',{edit:false,add:false,del:false, search: false});
已加载数据,但未显示网格。可能是什么问题?我的json数据格式是否正确?
答案 0 :(得分:2)
JSON数据和网格中都有很多错误。
我从JSON数据开始。 rows
必须是数组,而不是具有属性1,2,3的对象...此类对象将没有length
属性,因此将无法由jqGrid阅读。所以要解决这个问题,你应该使用
"rows":[
{
"taxonomy_id":"1",
...
},
...
]
而不是
"rows":{
"1":{
"taxonomy_id":"1",
...
},
...
}
下一个问题是jqGrid特定属性:parent
,level
,isLeaf
,loaded
。如果要加载节点的子节点而不是按需加载子节点,则应该为节点包含loaded:true
。
在JSON中,您使用的某些TreeGrid属性的名称与default names不对应。因此,您应该将parent_id
和is_leaf
属性重命名为parent
和isLeaf
,或使用其他jqGrid选项
treeReader: {parent_id_field: "parent_id", leaf_field: "is_leaf"}
在jqGrid中,您必须定义树网格的最重要参数:
treeGrid: true,
ExpandColumn: 'taxonomy_id',
jsonmap
中不需要colModel
,并且可以移除属性。