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>

这会产生完美的网格！ 然而 ！！！ 一旦我从树网格参数中删除 cmets，我的网格就没有加载！

我尝试在没有父级的父级的空值周围添加和删除引号

         "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）。