Создание сетки дерева с использованием 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 вы используете имя некоторых свойств TreeGrid, которое не соответствует именам по умолчанию . Поэтому вам следует либо переименовать свойства parent_id и is_leaf в parent и isLeaf, либо использовать дополнительную опцию jqGrid

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

В jqGrid вы должны определить наиболее важные параметры Tree Grid:

treeGrid: true,
ExpandColumn: 'taxonomy_id',

Нет jsonmap требуется в colModel, и свойства могут быть удалены.