我在将jqgrid实现为子网格时遇到了问题。当我点击加号图标时，子网格成为主要的和主要的消息。数据部分似乎没问题，因为子节点匹配主网格中的每一行。儿童网格似乎占据了主网格div并且失去了它自己的div。 这是代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqGridTest1.aspx.cs" Inherits="JQGridDemo.JqGridTest1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="JQGridReq/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="JQGridReq/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.json-2.3.min.js" type="text/javascript"></script>
<script src="JQGridReq/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="JQGridReq/grid.locale-en.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.extend($.jgrid.defaults,
{ datatype: 'json' },
{ ajaxGridOptions: { contentType: "application/json",
success: function (data, textStatus) {
if (textStatus == "success") {
var thegrid = $("#grdParam")[0];
thegrid.addJSONData(data.d);
thegrid.grid.hDiv.loading = false;
switch (thegrid.p.loadui) {
case "disable":
break;
case "enable":
$("#load_" + thegrid.p.id).hide();
break;
case "block":
$("#lui_" + thegrid.p.id).hide();
$("#load_" + thegrid.p.id).hide();
break;
}
}
}
}
});
jQuery("#grdParam").jqGrid({
url: 'JqGridTest1.aspx/GetDataTableGroup',
datatype: 'json',
mtype: 'POST',
height: 250,
colNames: ['GroupID', 'SubGroup', 'ParameterName', 'Value', 'Value2', 'UserInsert', 'InsertDate', 'UserUpdate', 'UpdateDate', 'Active'],
colModel: [{
name: 'GroupID',
index: 'GroupID',
width: 40,
editable: true,
editoptions: {
readonly: true,
size: 10
},
editrules: { edithidden: true }
},
{
name: 'SubGroup',
index: 'SubGroup',
width: 40,
editable: true,
editoptions: {
readonly: true,
size: 10
},
align: "left",
size: 100,
editrules: { edithidden: true }
},
{
name: 'ParameterName',
index: 'ParameterName',
width: 100,
align: "left",
editable: true,
size: 100
},
{
name: 'Value',
index: 'Value',
width: 100,
align: "left",
editable: true,
size: 100
},
{
name: 'Value2',
index: 'Value2',
width: 100,
align: "left",
editable: true,
size: 100
},
{
name: 'UserInsert',
index: 'UserInsert',
width: 100,
align: "left",
editable: false,
size: 100
},
{
name: 'InsertDate',
index: 'InsertDate',
width: 100,
align: "left",
editable: false,
size: 100,
sorttype: 'date',
datefmt: 'Y-m-d'
},
{
name: 'UserUpdate',
index: 'UserUpdate',
width: 100,
align: "left",
editable: false,
size: 100
},
{
name: 'UpdateDate',
index: 'UpdateDate',
width: 100,
align: "left",
editable: false,
size: 100,
sorttype: 'date',
datefmt: 'yyyy-mm-dd'
},
{
name: 'Active',
index: 'Active',
width: 100,
align: "left",
edittype: "checkbox",
editable: true,
size: 100
}
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'GroupID',
sortorder: 'asc',
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
url: 'JqGridTest1.aspx/GetDataTableSubGroup',
data: "{'pPageSize':'" + $("#" + subgrid_table_id).getGridParam("rowNum") +
"','pCurrentPage':'" + $("#" + subgrid_table_id).getGridParam("page") +
"','pSortColumn':'" + $("#" + subgrid_table_id).getGridParam("sortname") +
"','pSortOrder':'" + $("#" + subgrid_table_id).getGridParam("sortorder") + "'}", //PageMethod Parametros de entrada
postData: {
GroupID: row_id
}
,
datatype: 'json',
mtype: 'POST',
height: 150,
colNames: ['Grupo', 'Sub Grupo', 'Nombre', 'Valor 1', 'Valor 2', 'Usuario Insercion', 'Fecha Insercion', 'Usuario Actualizacion', 'Fecha Actualizacion', 'Active'],
colModel: [{
name: 'GroupID',
index: 'GroupID',
width: 40,
editable: true,
editoptions: {
readonly: true,
size: 10
},
editrules: { edithidden: true }
},
{
name: 'SubGroup',
index: 'SubGroup',
width: 40,
editable: true,
editoptions: {
readonly: true,
size: 10
},
align: "left",
size: 100,
editrules: { edithidden: true }
},
{
name: 'ParameterName',
index: 'ParameterName',
width: 100,
align: "left",
editable: true,
size: 100
},
{
name: 'Value',
index: 'Value',
width: 100,
align: "left",
editable: true,
size: 100
},
{
name: 'Value2',
index: 'Value2',
width: 100,
align: "left",
editable: true,
size: 100
},
{
name: 'UserInsert',
index: 'UserInsert',
width: 100,
align: "left",
editable: false,
size: 100
},
{
name: 'InsertDate',
index: 'InsertDate',
width: 100,
align: "left",
editable: false,
size: 100,
sorttype: 'date',
datefmt: 'Y-m-d'
},
{
name: 'UserUpdate',
index: 'UserUpdate',
width: 100,
align: "left",
editable: false,
size: 100
},
{
name: 'UpdateDate',
index: 'UpdateDate',
width: 100,
align: "left",
editable: false,
size: 100,
sorttype: 'date',
datefmt: 'yyyy-mm-dd'
},
{
name: 'Active',
index: 'Active',
width: 100,
align: "left",
edittype: "checkbox",
editable: true,
size: 100
}
],
pager: jQuery('#pager2'),
sortname: 'GroupID',
sortorder: 'asc',
multiboxonly: false,
viewrecords: true,
imgpath: 'Themes/images',
contentType: "application/json; charset=utf-8",
serializeGridData: function (data) {
return $.toJSON(data);
}
})
},
multiboxonly: false,
viewrecords: true,
imgpath: 'Themes/images',
serializeGridData: function (data) {
return $.toJSON(data);
}
}).navGrid("#pager", { edit: true, add: true, search: true, del: true },
{ url: "JqGridTest1.aspx/EditData", closeAfterEdit: true },
{ url: "JqGridTest1.aspx/EditData", closeAfterAdd: true, beforeShowForm: function (formid) {
//jQuery("#ParameterName").focus();
//$("#ParameterName").focus();
jQuery("#GroupID").val("AUTOMATIC VALUE");
jQuery("#SubGroup").val("0");
}, afterShowForm: function (formid) {
$("#ParameterName").focus();
}
},
{ url: "JqGridTest1.aspx/DeleteData" });
});
jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
return JSON.stringify(postData);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="grdParam" class="scroll" align="center" width="100%">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
</form>
</body>
</html>
答案 0 :(得分：0)
问题是我对主网格和子网格都使用了相同的扩展功能。
删除了以下代码，并将json连接添加到主网格和子网格连接函数中，并且工作正常：
$.extend($.jgrid.defaults,
{ datatype: 'json' },
{ ajaxGridOptions: { contentType: "application/json",
success: function (data, textStatus) {
if (textStatus == "success") {
var thegrid = $("#grdParam")[0];
thegrid.addJSONData(data.d);
thegrid.grid.hDiv.loading = false;
switch (thegrid.p.loadui) {
case "disable":
break;
case "enable":
$("#load_" + thegrid.p.id).hide();
break;
case "block":
$("#lui_" + thegrid.p.id).hide();
$("#load_" + thegrid.p.id).hide();
break;
}
}
}
}
});