JQGrid Subgrid错误如何解决此问题? [英] JQGrid Subgrid Error How can this be fixed?
问题描述
我正在尝试根据网上遇到的示例使用Subgrid生成JQgrid，但我使用的是json服务，而不是本地数据.
I am trying to generate a JQgrid with Subgrid based on examples I came across online but instead of local data, I am using json service .
通过使用嵌套的JSON数据，其中嵌套的json数据用于subgrid部分.
By Using nested JSON data, where the nested json data is used for the subgrid section.
当我尝试创建网格时，不断收到此错误" SyntaxError:JSON中的意外令牌i在位置26 200 OK "
When I try to create the grid, I keep getting this error "SyntaxError: Unexpected token i in JSON at position 26 200 OK"
我做错了什么或想念什么?
What am I doing wrong or missing?
我的代码在下面，我的提琴在这里
My code is below and my 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
});
}
});
});
推荐答案
首先，您必须修复语法错误.变量jsonData的定义形式为
First of all you have to fix the syntax error. The definition of the variable jsonData in the form
var jsonData = {
id: 48803,
...
},
{
id: 48769,
...
};
是错误的.您尝试将jsonData定义为项目的数组.因此，代码片段必须固定为
is false. You try to define jsonData as array of items. Thus the code fragment have to be fixed to
var jsonData = [{
id: 48803,
...
},
{
id: 48769,
...
}];
然后定义<table id="grid"></table>，但是在您的演示中使用$("#output").jqGrid({...});创建网格.如果id，则在两种情况下都必须使用相同的 值.
Then you define <table id="grid"></table>, but create the grid using $("#output").jqGrid({...}); in your demo. You have to use in both cases the same value if id.
现在，回到您的主要问题上.您想使用通过datatype: "json"填充的数据项($(this).jqGrid("getLocalRow", row_id).subgridData)的subgridData属性. datatype: "json"表示基于服务器的数据排序，分页和过滤. jqGrid不会填充 local 数据(data参数).要填充data，您必须通知jqGrid:服务器输入的数据包含完整数据(所有页面)，因此jqGrid应该填充data选项并使用 local 排序，分页和过滤.因此，您应该添加
Now, back to you main problem. You want to use subgridData property of the items of the data ($(this).jqGrid("getLocalRow", row_id).subgridData) filled via datatype: "json". The datatype: "json" means server based sorting, paging and filtering of the data. jqGrid don't fill local data (the data parameter). To fill data you have to inform jqGrid that the input data from the server contains full data (all the pages) and thus jqGrid should fill data option and to use local sorting, paging and filtering. Thus you should add
loadonce: true,
和
additionalProperties: ["subgridData"],
另外通知jqGrid使用subgridData属性以及属性id，thingy，number和status(主网格的列)填充本地数据项.
additionally to inform jqGrid to fill the items of local data with subgridData property together with the properties id, thingy, number and status (the columns of the main grid).
最后，您可以删除不需要的寻呼机div，并使用寻呼机的简化形式:pager: true.您应该考虑另外使用Font Awesome:iconSet: "fontAwesome".
Finally you can remove unneeded pager divs and to use simplified form of the pager: pager: true. You should consider to use Font Awesome additionally: iconSet: "fontAwesome".
修改后的演示为 https://jsfiddle.net/OlegKi/615qovew/64/，它使用以下代码
The modified demo is https://jsfiddle.net/OlegKi/615qovew/64/, which uses the following code
$(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");
});
这篇关于JQGrid Subgrid错误如何解决此问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
