JQGrid子网格错误如何解决这个问题？

Question

我想根据我在网上遇到的例子生成一个带有子网格的JQgrid，但是我使用的是json服务，而不是本地数据。

通过使用嵌套的JSON数据，其中嵌套的JSON数据用于子网格部分。 “：在26位200 OK意外标记我在JSON的SyntaxError”

我在做什么错误或丢失

当我尝试创建网格，我不断收到此错误？

我的代码如下，我的Fiddle is here

我的代码

$(document).ready(function() { 
    var jsonData = { 
     id: 48803, 
     thingy: "DSK1", 
     number: "02200220", 
     status: "OPEN", 
     subgridData: [{ 
     num: 1, 
     item: "Item 1", 
     qty: 3 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 5 
     }] 
    }, 
    { 
     id: 48769, 
     thingy: "APPR", 
     number: "77733337", 
     status: "ENTERED", 
     subgridData: [{ 
     num: 3, 
     item: "Item 3", 
     qty: 5 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 10 
     }] 
    }, 
    mmddyyyy = ""; 
    /*********************************************************************/ 


    $("#grid").jqGrid({ 
    url: "/echo/json/", 
    mtype: "POST", 
    datatype: "json", 
    postData: { 
     json: JSON.stringify(jsonData) 
    }, 
    height: 'auto', 
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     width: 60, 
     sorttype: "int", 
     key: true 
    }, { 
     name: 'thingy', 
     width: 90 
    }, { 
     name: 'number', 
     width: 80, 
     formatter: "integer" 
    }, { 
     name: 'status', 
     width: 80 
    }], 
    gridview: true, 
    autoencode: true, 
    pager: '#pagerId', 
    caption: "Stack Overflow Subgrid Example", 
    subGrid: true, 
    subGridOptions: { 
     plusicon: "ui-icon-triangle-1-e", 
     minusicon: "ui-icon-triangle-1-s", 
     openicon: "ui-icon-arrowreturn-1-e" 
    }, 
    shrinkToFit: false, 

    subGridRowExpanded: function(subgrid_id, row_id) { 
     var subgrid_table_id = subgrid_id + "_t", 
     pager_id = "p_" + subgrid_table_id, 
     localRowData = $(this).jqGrid("getLocalRow", row_id); 
     $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>"); 
     $("#" + subgrid_table_id).jqGrid({ 
     datatype: "local", 
     data: localRowData.subgridData, 
     colNames: ['No', 'Item', 'Qty'], 
     colModel: [{ 
      name: "num", 
      width: 80, 
      key: true 
     }, { 
      name: "item", 
      width: 130 
     }, { 
      name: "qty", 
      width: 70, 
      align: "right" 
     }], 
     rowNum: 20, 
     idPrefix: "s_" + row_id + "_", 
     pager: "#" + pager_id, 
     autowidth: true, 
     gridview: true, 
     autoencode: true, 
     sortname: "num", 
     sortorder: "asc", 
     height: "auto" 
     }).jqGrid('navGrid', "#" + pager_id, { 
     edit: false, 
     add: false, 
     del: false 
     }); 
    } 
    }); 


}); 

MY Fiddle

Answer 1

首先你必须修复语法错误。变量jsonData的定义形式为

var jsonData = { 
     id: 48803, 
     ... 
    }, 
    { 
     id: 48769, 
     ... 
    }; 

是错误的。您尝试将jsonData定义为数组的项目。因此，代码片段都被固定到

var jsonData = [{ 
     id: 48803, 
     ... 
    }, 
    { 
     id: 48769, 
     ... 
    }]; 

然后定义<table id="grid"></table>，但创造your demo使用$("#output").jqGrid({...});电网。你必须在两种情况下使用相同的值如果id。

现在，回到你的主要问题。您要使用通过datatype: "json"填写的数据项（$(this).jqGrid("getLocalRow", row_id).subgridData）的subgridData属性。 datatype: "json"意味着基于服务器的排序，寻呼和数据过滤。 jqGrid不填写本地数据（data参数）。填写data您必须通知jqGrid，来自服务器的输入数据包含完整数据（所有页面），因此jqGrid应该填写data选项并使用本地排序，寻呼和过滤。因此，你应该添加

loadonce: true, 

和

additionalProperties: ["subgridData"], 

还与性能id，thingy，number和status（主要的列通知的jqGrid，以填补subgridData财产本地数据的物品放在一起格）。

最后，您可以删除不需要的寻呼机div，并使用寻呼机的简化形式：pager: true。你应该考虑另外使用Font Awesome：iconSet: "fontAwesome"。

修改后的演示为https://jsfiddle.net/OlegKi/615qovew/64/，它使用下面的代码

$(document).ready(function() { 
    var jsonData = [{ 
     id: 48803, 
     thingy: "DSK1", 
     number: "02200220", 
     status: "OPEN", 
     subgridData: [{ 
     num: 1, 
     item: "Item 1", 
     qty: 3 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 5 
     }] 
    }, 
    { 
     id: 48769, 
     thingy: "APPR", 
     number: "77733337", 
     status: "ENTERED", 
     subgridData: [{ 
     num: 3, 
     item: "Item 3", 
     qty: 5 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 10 
     }] 
    }], 
    mmddyyyy = "", 
    $grid = $("#output"); 
    /*********************************************************************/ 

    $grid.jqGrid({ 
    url: "/echo/json/", 
    mtype: "POST", 
    datatype: "json", 
    postData: { 
     json: JSON.stringify(jsonData) 
    }, 
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     width: 60, 
     sorttype: "int", 
     key: true 
    }, { 
     name: 'thingy', 
     width: 90 
    }, { 
     name: 'number', 
     width: 80, 
     formatter: "integer" 
    }, { 
     name: 'status', 
     width: 80 
    }], 
    loadonce: true, 
    additionalProperties: ["subgridData"], 
    autoencode: true, 
    pager: true, 
    caption: "Stack Overflow Subgrid Example", 
    subGrid: true, 
    /*subGridOptions: { 
     plusicon: "ui-icon-triangle-1-e", 
     minusicon: "ui-icon-triangle-1-s", 
     openicon: "ui-icon-arrowreturn-1-e" 
    },*/ 
    iconSet: "fontAwesome", 
    shrinkToFit: false, 
    subGridRowExpanded: function(subgridDivId, rowid) { 
     var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
      subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData; 

     $("#" + subgridDivId).append($subgrid); 
     $subgrid.jqGrid({ 
     data: subgridData, 
     colNames: ['No', 'Item', 'Qty'], 
     colModel: [{ 
      name: "num", 
      width: 80, 
      key: true 
     }, { 
      name: "item", 
      width: 130 
     }, { 
      name: "qty", 
      width: 70, 
      align: "right" 
     }], 
     rowNum: 20, 
     idPrefix: "s_" + rowid + "_", 
     pager: true, 
     iconSet: "fontAwesome", 
     autowidth: true, 
     autoencode: true, 
     sortname: "num" 
     }).jqGrid('navGrid', { 
     edit: false, 
     add: false, 
     del: false 
     }); 
    } 
    }).jqGrid('filterToolbar', { 
    stringResult: true, 
    searchOnEnter: false, 
    defaultSearch: "cn" 
    }); 

    $(window).on("resize", function() { 
    var newWidth = $grid.closest(".ui-jqgrid").parent().width(); 
    $grid.jqGrid("setGridWidth", newWidth, true); 
    }).triggerHandler("resize"); 
});