0
我试图从主网格加载子网格数据。主网格加载正常，但是当我点击一行时，子网格数据不会加载。 不知道我错过了什么。请帮忙。Jqgrid - 子网格数据不加载
以下是我正在使用的代码。
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var mydata = [],
grid = $("#list");
var mainGridPrefix = "s_";
grid.jqGrid({
url: '${recordsUrl}',
datatype: 'json',
ignoreCase: true,
mtype: 'GET',
colNames: ['Global Search', 'serverId', 'DeviceName', 'Description', 'Console', 'OS', 'Business Unit', 'Model', 'Manufacturer', 'Serial Number', 'LifeCycle', 'Tier'],
colModel: [{
name: 'globalSearch',
index: 'globalSearch',
width: 50,
hidden: true,
searchoptions: {
searchhidden: true
}
}, {
name: 'serverId',
index: 'serverId',
width: 10,
hidden: true
}, {
name: 'deviceName',
index: 'deviceName',
width: 50
}, {
name: 'serverDesc',
index: 'serverDesc',
width: 70
}, {
name: 'console',
index: 'console',
width: 50
}, {
name: 'groupName',
index: 'groupName',
width: 40
}, {
name: 'businessUnit',
index: 'businessUnit',
width: 30
}, {
name: 'model',
index: 'model',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'manufacturer',
index: 'manufacturer',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'serialNumber',
index: 'serialNumber',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'lifeCycle',
index: 'lifeCycle',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'tier',
index: 'tier',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}],
postData: {},
rowNum: 10,
rowList: [10, 20, 40, 60],
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'deviceName',
viewrecords: true,
sortorder: "asc",
caption: "Records",
emptyrecords: "Empty records",
idPrefix: mainGridPrefix,
loadonce: true,
loadComplete: function() {},
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "serverId"
},
subGrid: true,
beforeProcessing: function (data) {
var rows = data.rows,
l = rows.length,
i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.apps) {
subgrids[item.id] = item.apps;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: subgrids[pureRowId],
colNames: ["App Id", "Desc"],
colModel: [{
name: "appId"
}, {
name: "applicationDesc"
}],
sortname: "applicationDesc",
height: "100%",
rowNum: 10000,
autoencode: true,
autowidth: true,
jsonReader: {
repeatitems: false,
id: "appId"
},
gridview: true,
idPrefix: rowId + "_"
});
}
});
$("#search").click(function() {
var searchFiler = $("#filter").val(),
f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, {
filters: ""
});
}
f = {
groupOp: "OR",
rules: []
};
f.rules.push({
field: "globalSearch",
op: "cn",
data: searchFiler
});
f.rules.push({
field: "deviceName",
op: "cn",
data: searchFiler
});
grid[0].p.search = true;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1,
current: true
}]);
});
grid.jqGrid('navGrid', '#pager', {
edit: false,
add: false,
del: false,
search: true,
view: true
}, {}, {}, {}, { // search
sopt: ['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
}, { // vew options
beforeShowForm: function (form) {
$("tr#trv_id", form[0]).show();
},
afterclickPgButtons: function (whichbutton, form, rowid) {
$("tr#trv_id", form[0]).show();
}
});
grid.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-plus",
onClickButton: addRow,
position: "last",
title: "",
cursor: "pointer"
});
grid.navButtonAdd('#pager', {
caption: "Edit",
buttonicon: "ui-icon-pencil",
onClickButton: editRow,
position: "last",
title: "",
cursor: "pointer"
});
grid.navButtonAdd('#pager', {
caption: "Delete",
buttonicon: "ui-icon-trash",
onClickButton: deleteRow,
position: "last",
title: "",
cursor: "pointer"
});
});
//]]>
感谢您的答复。我添加了子网格的ColModel的索引信息，但它仍然不起作用。但json数据似乎也是正确的。 – Pdadev 2013-03-01 18:03:56
您是否确定colmodel和colNames上的名称与适当的大写相同？请查看以下示例并尝试模仿http://jsfiddle.net/RQtjZ/ – CharlesMighty 2013-03-01 18:13:41
是的。colmodel上的名称与jsondata匹配，并且colName也与colmodel中的名称具有相同的值。 – Pdadev 2013-03-01 18:31:03