使用带有json数据的jqGrid创建树网格

时间:2012-02-02 09:26:55

标签: jqgrid

我正在尝试使用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数据格式是否正确?

1 个答案:

答案 0 :(得分:2)

JSON数据和网格中都有很多错误。

我从JSON数据开始。 rows必须是数组,而不是具有属性1,2,3的对象...此类对象将没有length属性,因此将无法由jqGrid阅读。所以要解决这个问题,你应该使用

"rows":[
    {
        "taxonomy_id":"1",
        ...
    },
    ...
]

而不是

"rows":{
    "1":{
        "taxonomy_id":"1",
        ...
    },
    ...
}

下一个问题是jqGrid特定属性:parentlevelisLeafloaded。如果要加载节点的子节点而不是按需加载子节点,则应该为节点包含loaded:true

在JSON中,您使用的某些TreeGrid属性的名称与default names不对应。因此,您应该将parent_idis_leaf属性重命名为parentisLeaf,或使用其他jqGrid选项

treeReader: {parent_id_field: "parent_id", leaf_field: "is_leaf"}

在jqGrid中,您必须定义树网格的最重要参数:

treeGrid: true,
ExpandColumn: 'taxonomy_id',

jsonmap中不需要colModel,并且可以移除属性。