我想要使用Jqgrid中的子网格功能显示两个表(父/子)。主网格填充来自我的数据模型(父表)的数据,但是当扩展子网格时,不会填充子表中的数据。看看我的代码,我哪里错了?
Jquery的
$(function () {
$("#grid").jqGrid({
url: "./EditManifest/GetTodoLists",
datatype: 'json',
mtype: 'Get',
colNames: ['ID', 'BL', 'CARRIER BL', 'CARRIER', 'DESTINATION', 'TIN', 'TELEPHONE', 'ADRESS',],
colModel: [
{ key: true, name: 'ID', index: 'ID', editable: false },
{ key: true, name: 'BL', index: 'BL', editable: false, sortable: true },
{ key: false, name: 'CARRIER_BL', index: 'CARRIER_BL', editable: true, edittype: 'text' },
{ key: false, name: 'CARRIER', index: 'CARRIER', editable: true, edittype: 'text' },
{ key: false, name: 'DESTINATION', index: 'DESTINATION', editable: true, edittype: 'text' },
{ key: false, name: 'TIN', index: 'TIN', editable: true, edittype: 'text' },
{ key: false, name: 'TELEPHONE', index: 'TELEPHONE', editable: true, edittype: 'text' },
{ key: false, name: 'ADRESS', index: 'ADRESS', editable: true, edittype: 'text' },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
multiselect: false,
subGrid: true,
subGridUrl: "./EditManifest/subgrid",
subGridModel: [{
colNames: ['BL', 'Container', 'Size', 'Type', 'TotalWeight', 'HS Code', 'ATA'],
colModel: [{ key: true, name: "BL", index: "BL", width: 80 },
{ key: true, name: "ContianerNumber", index: "ContianerNumber", width: 130 },
{ name: "Contianersize", index: "Contianersize", width: 70 },
{ name: "ContianerType", index: "ContianerType", width: 70 },
{ name: "TOTALWEIGHT", index: "TOTALWEIGHT", width: 70 },
{ name: "hscode", index: "hscode", width: 130 },
{ name: "ArrivalDate", index: "ArrivalDate", width: 70 }]
}
],
caption: 'Edit Manifest Data',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: true },
{
// edit options
zIndex: 100,
url: './EditManifest/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
});
控制器
public class EditManifestController : Controller
{
public StatusFollowUPEntities db = new StatusFollowUPEntities();
public ActionResult Index()
{
return View();
}
public JsonResult GetTodoLists(string sidx, string sord, int page, int rows)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var todoListsResults = db.tblBLs.Select(
a => new
{
a.ID,
a.BL,
a.CARRIER_BL,
a.CARRIER,
a.DESTINATION,
a.SAILINGDATE,
a.TIN,
a.TELEPHONE,
a.ADRESS,
});
int totalRecords = todoListsResults.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if (sord.ToUpper() == "DESC")
{
todoListsResults = todoListsResults.OrderByDescending(s => s.BL);
todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
todoListsResults = todoListsResults.OrderBy(s => s.BL);
todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
}
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = todoListsResults
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public JsonResult subgrid(string id)
{
var ctrDetails = db.tblCtrDetails.Where(a => a.BL == id).Select(
a => new
{
a.BL,
a.ContianerNumber,
a.Contianersize,
a.ContianerType,
a.TOTALWEIGHT,
a.hscode,
a.ArrivalDate,
});
//Returning json data
return Json(ctrDetails);
}
}
查看
<div>
<table id="grid"></table>
<div id="pager"></div>
</div>
<script src="@Url.Content("~/Scripts/.....
答案 0 :(得分:1)
您的前端代码和后端代码中存在几个问题。
subGridModel
选项与根jqGrid略有不同 - 没有colNames
或colModel
,您应该使用name
和mapping
。
...
subGridModel: [{
name: [ 'BL', 'Container', 'Size', 'Type', 'TotalWeight', 'HS Code', 'ATA' ],
mapping: [ 'BL', 'ContianerNumber', 'Contianersize', 'ContianerType', 'TOTALWEIGHT', 'hscode', 'ArrivalDate' ]
}],
...
另外,为了让mapping
生效,您需要调整jsonReader
设置。
...
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
Id: '0',
subgrid: {
root: 'rows',
repeatitems: false
}
},
...
现在,您的操作需要以符合jsonReader
。
public JsonResult subgrid(string id)
{
var subGridData = new
{
rows = db.tblCtrDetails.Where(a => a.BL == id).Select(a => new
{
a.BL,
a.ContianerNumber,
a.Contianersize,
a.ContianerType,
a.TOTALWEIGHT,
a.hscode,
a.ArrivalDate
})
};
return Json(subGridData, JsonRequestBehavior.AllowGet);
}
这应该可以解决问题。