JqGrid - 子网格不显示数据
JqGrid - SubGrid not display data
在我尝试了 Whosebug 中的所有东西之后，我 运行 失去了想法。
问题是：我有一个子网格的 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
}
);
});
子网格 url return 这个 json :
[{"Id":0,"FileName":"91606246.pdf","Size":0.03}]
但是子网格没有显示接收到的数据。这是片段 sc：
Grid with subgrid empty
我有以下配置：
- MVC 4，
- 网络框架 4.5
- jquery-2.2.3.js
- jquery.jqGrid.min.js（@license Guriddo jqGrid JS - v5.1.1 ...）
请帮忙。
您在子网格中使用 dataType: 'json' 选项而不是 datatype: 'json'。这可能是你的主要问题。
我强烈建议您向子网格添加 idPrefix 选项，并使用一些独特的值，例如 idPrefix。例如 idPrefix: "s_" + row_id + "_" 或 idPrefix: subgrid_id 或只是 idPrefix: $.jgrid.randId()。它将防止您以后遇到 id 重复的问题。在许多情况下，选项 autoencode: true 对子网格也很有帮助。
我建议您考虑使用free jqGrid (which I develop) instead of commercial Guriddo jqGrid JS. If you do prefer to use Guriddo, then you should think about the required payments (see the prices)和关于持有许可协议。
在我尝试了 Whosebug 中的所有东西之后，我 运行 失去了想法。 问题是：我有一个子网格的 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
}
);
});
子网格 url return 这个 json :
[{"Id":0,"FileName":"91606246.pdf","Size":0.03}]
但是子网格没有显示接收到的数据。这是片段 sc： Grid with subgrid empty
我有以下配置：
- MVC 4，
- 网络框架 4.5
- jquery-2.2.3.js
- jquery.jqGrid.min.js（@license Guriddo jqGrid JS - v5.1.1 ...）
请帮忙。
您在子网格中使用 dataType: 'json' 选项而不是 datatype: 'json'。这可能是你的主要问题。
我强烈建议您向子网格添加 idPrefix 选项，并使用一些独特的值，例如 idPrefix。例如 idPrefix: "s_" + row_id + "_" 或 idPrefix: subgrid_id 或只是 idPrefix: $.jgrid.randId()。它将防止您以后遇到 id 重复的问题。在许多情况下，选项 autoencode: true 对子网格也很有帮助。
我建议您考虑使用free jqGrid (which I develop) instead of commercial Guriddo jqGrid JS. If you do prefer to use Guriddo, then you should think about the required payments (see the prices)和关于持有许可协议。