創建的jqGrid使用與JSON數據樹網格

Question

我試圖使用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數據格式是否正確？

Answer 1

在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您使用的不對應於default names一些的TreeGrid屬性的名稱。所以，你應該要麼parent_id和is_leaf屬性重命名爲parent和isLeaf或使用額外的jqGrid選項

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

在jqGrid的，你必須定義樹網的最重要的參數：

treeGrid: true, 
ExpandColumn: 'taxonomy_id', 

無colModel需要jsonmap，並且可以刪除屬性。