jqGrid сетка дерева - не отображается?

Question

Существует концепция, которая ускользает от меня ... Я не могу понять, что это я делаю неправильно! У меня есть следующие JSON:

{ 
"data":[ 
    { 
    "amount":150.00, 
    "dealDate":"10/18/15 11:53 AM", 
    "dealName":"Deal 1", 
    "id":"1", 
    "parent":"null", 
    "level":"0", 
    "isLeaf":false, 
    "loaded":true   
    }, 
    { 
    "amount":100.00, 
    "dealDate":"10/16/15 11:53 AM", 
    "dealName":"Deal 1a", 
    "id":"2", 
    "parent":"1", 
    "level":"1", 
    "isLeaf":true, 
    "loaded":true   
    }, 
    { 
    "amount":-20.34, 
    "dealDate":"10/16/15 11:53 AM", 
    "dealName":"Deal 1b", 
    "id":"3", 
    "parent":"1", 
    "level":"1", 
    "isLeaf":true, 
    "loaded":true 
    }, 
    { 
    "amount":25, 
    "dealDate":"10/16/15 11:53 AM", 
    "dealName":"Deal 2", 
    "id":"4", 
    "parent":"null", 
    "level":"0", 
    "isLeaf":false, 
    "loaded":true   
    } 
] 
} 

и определение jQgrid: (с вариантами TreeGrid удалены (закомментированными))

<script type="text/javascript"> 
    $(function() { 

    var mydata ; 
     $.getJSON("sampleData.json", function(data) { 
      mydata=$.extend(true, [], data.data) ; 

    console.log("Initial JSON data:\n" + JSON.stringify(mydata)); 

     $("#list").jqGrid({ 
     data: mydata,   
     datatype: "local", 
     mtype: "GET", 
     colNames: ["id", "Title", "Amount", "Date", "","","",""], 
     colModel: [      
      { name: "id", width: 55, hidden: true},     
      { name: "dealName", width: 90, editable: true }, 
      { name: "amount", width: 80, align: "right",editable: true }, 
      { name: "dealDate", width: 80, align: "right", editable: true } 
      { name: "parent", width: 80, align: "right", hidden: true }, 
      { name: "level", width: 80, align: "right", hidden: true }, 
      { name: "isLeaf", width: 80, align: "right", hidden: true }, 
      { name: "loaded", width: 80, align: "right", hidden: true } 
     ], 
     editurl: 'clientArray', 
     cellsubmit : 'clientArray',    
     rowNum: 10, 
     rowList: [10, 20, 30, 50], 
     sortname: "id", 
     viewrecords: true, 
     gridview: true, 
//    treeGrid: true, 
//    ExpandColumn: 'dealName', 
//    treeGridModel:'adjacency',     
     width: $(window).width() *0.55, 
     caption: "Deal Test Grid"  
    }); 
    $("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: 
    false }); 
    $("#list").jqGrid('gridResize'); 
     }); 
    }); 
</script> 

И это производит совершенно мелкую сетку !! ОДНАКО !!! Как только я удаляю комментарии из параметров сетки дерева, моя сетка НЕ ​​загружается !!

Я попытался с добавлением и удалением кавычек вокруг нулевого значения родителя, где нет родителя

  "parent":"null", vs.   "parent":null, 

Нет помогло !! Те же результаты !! Пожалуйста, помогите !! Как это называется - это то, что я делаю неправильно.

Answer 1

В коде есть некоторые проблемы. Прежде всего, это синтаксическая ошибка в colModel: без запятой после элемента, который определяет столбец dealDate. Следующая проблема: входные данные должны содержать id, parent, level, isLeaf и isLeaf, но вы не должны указывать какие-либо столбцы в colModel с именами. Последняя важная проблема: вам нужно включить treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "dealName" и необязательно ExpandColClick: true, чтобы сетка была TreeGrid.

Полученный код может быть

$("#list").jqGrid({ 
    data: mydata, 
    colNames: ["Title", "Amount", "Date"], 
    colModel: [ 
     { name: "dealName", width: 100 }, 
     { name: "amount", width: 80, template: "number" }, 
     { name: "dealDate", width: 180, align: "right", sorttype: "date", 
      formatter: "date", 
      formatoptions: { srcformat: "n/j/Y g:i A", newformat: "n/j/Y g:i A" } } 
    ], 
    cmTemplate: { width: 80, autoResizable: true, editable: true }, 
    iconSet: "fontAwesome", 
    treeGrid: true, 
    treeGridModel: "adjacency", 
    ExpandColumn: "dealName", 
    ExpandColClick: true, 
    inlineEditing: { keys: true }, 
    ondblClickRow: function (rowid, iRow, iCol, e) { 
     var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow"); 
     if (savedRow.length > 0 && savedRow[0].id !== rowid) { 
      $self.jqGrid("restoreRow", savedRow[0].id); 
     } 
     $self.jqGrid("editRow", rowid, { focusField: e.target }); 
    } 
}).jqGrid("gridResize"); 

где я включил начиная встроенное редактирование по двойному щелчку. В результате демо можно найти here. Он использует бесплатный jqGrid 4.10.0, который я опубликовал сегодня. Код уже доступен на CDN (см. the wiki article).