JQGrid子网格错误如何修复？

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

通过使用嵌套的JSON数据，嵌套的json数据用于子网格部分。

当我尝试创建网格时，我不断收到此错误“ SyntaxError：JSON位置26 200的意外令牌i OK ”

我做错了什么或错过了什么？

我的代码在下面，我的小提琴在这里

我的代码

$(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("
"); $("#" + 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 }); } }); }); 

我的小提琴

Answer 1

首先，您必须修复语法错误。 表单中变量jsonData的定义

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

是假的。 您尝试将jsonData定义为项目数组 。 因此必须修复代码片段

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

然后定义

，但使用$("#output").jqGrid({...});创建网格$("#output").jqGrid({...}); 在你的演示中 。 如果是id你必须在两种情况下都使用相同的值。

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

 loadonce: true, 

和

 additionalProperties: ["subgridData"], 

另外通知jqGrid用subgridData属性填充本地数据项以及属性id ， thingy ， number和status （主网格的列）。

最后，您可以删除不需要的寻呼机div并使用简化forms的寻呼机： 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 = $(""), 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"); });