JqG​​rid-SubGrid不顯示數據

Question

在嘗試了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 url返回此json：

[{"Id":0,"FileName":"91606246.pdf","Size":0.03}]

但是子網格不顯示接收到的數據。 這是片段sc： 子網格為空的網格

我有以下配置：

• MVC 4
• 凈框架4.5
• jQuery的2.2.3.js
• jquery.jqGrid.min.js（@license Guriddo jqGrid JS-v5.1.1 ...）

請幫忙。

Answer 1

您在子網格中使用dataType: 'json'選項，而不是datatype: 'json' 。 這可能是您的主要問題。

我idPrefix建議您將idPrefix選項添加到idPrefix ，並使用idPrefix這樣的唯一值。 例如idPrefix: "s_" + row_id + "_"或idPrefix: subgrid_id或僅idPrefix: $.jgrid.randId() 。 這樣可以防止您以后遇到ID重復的問題。 在許多情況下，選項autoencode: true對於子網格也很有用。

我建議您考慮使用免費的jqGrid （由我開發）代替商業的Guriddo jqGrid JS。 如果您確實喜歡使用Guriddo，則應考慮所需的付款（請參閱價格 ）和許可證協議的持有情況。