在我尝试stackoverflow中的每一件事之后，我的想法就用完了。 问题是：我有一个子网格的jqGrid。网格工作得很完美，但是子网格不显示数据。
JS代码：
$(document).ready(function () {
$("#tblJQGrid").jqGrid(
{
url: '@Url.Action("GetDataForGrid", "Validator")',
datatype: "json",
mtype: 'GET',
colNames: ['Archive Name', 'Upload By', 'Upload Date', 'Size in Mb'],
colModel: [
{ name: 'ArchiveName', index: 'ArchiveName', width: 150, stype: 'text' },
{ name: 'UploadUser', index: 'UploadUser', width: 150 },
{ name: 'UploadDate', index: 'UploadDate', width: 150 },
{ name: 'Size', index: 'Size', width: 150 }
],
sortname: 'ArchiveName',
rowNum: 10,
autowidth: true,
height: "auto",
gridview: true,
emptyrecords:"No records...",
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
viewrecords: true,
sortorder: 'desc',
caption: "List Pending Archive",
scrollOffset: 0,
subGrid: true,
subGridOptions:{
plusicon : "ui-icon-plus",
minusicon : "ui-icon-minus",
openicon: "ui-icon-carat-1-sw",
expandOnLoad: false,
selectOnExpand : false,
reloadOnExpand : true
},
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
var pager_id;
var d = [{ "Id": 0, "FileName": "91606246.pdf", "Size": 0.03 }];
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
var cellValue = $("#tblJQGrid").jqGrid('getCell', row_id, 'ArchiveName');
//jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
jsonReader: {
repeatitems: false,
cell: "",
id: "0"
},
url: '@Url.Action("GetDataSubGrid", "Validator")?FileName=' + cellValue,
//mtype: 'GET',
dataType: 'json',
colNames: ['Id', 'Archive Name', 'Size in Mb'],
colModel: [
{ name: "Id", index: "Id", width: 20, sortable: true },
{ name: "FileName", index: "FileName", width: 130,sortable:true },
{ name: "Size", index: "Size", width: 80, align: "right" },
],
height: 'auto',
//loadonce: true,
//gridview: true,
//autoencode: true,
rowNum: 20,
viewrecords: true,
sortname: 'FileName',
sortorder: "desc"
});
//jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
}
});
$('#tblJQGrid').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true,//Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true }]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
});
SubGrid网址返回此json：
[{"Id":0,"FileName":"91606246.pdf","Size":0.03}]
但是子网格没有显示收到的数据。这是片段sc： Grid with subgrid empty
我有以下配置：
请帮忙。
答案 0 :(得分：0)
您在子网格中使用dataType: 'json'选项而不是datatype: 'json'。这可能是你的主要问题。
我强烈建议您在子网格中添加idPrefix选项，并使用idPrefix等唯一值。例如idPrefix: "s_" + row_id + "_"或idPrefix: subgrid_id或仅idPrefix: $.jgrid.randId()。它会阻止您以后出现id重复的问题。在许多情况下，选项autoencode: true对子网格也很有用。
我建议您考虑使用free jqGrid（我开发的）而不是商业Guriddo jqGrid JS。如果你更喜欢使用Guriddo，那么你应该考虑所需的付款（见the prices）以及许可协议的持有。
