【发布时间】：2014-06-22 07:41:08
【问题描述】：
我无法简单地用数据填充 jqGrid。我查看了文档，希望有人可以请帮助我解决这个问题...
我已验证数据从我的服务器端控制器方法返回，如下所示。示例仅适用于 fto 对象中的记录。
Customer_Name = "X"
FuelTkt_ID = 2
Image_ID = "12345"
Ticket_No = 6460193
Trans_Timestamp = {3/19/2014 10:20:00 AM}
Vehicle_No = "123456"
public async Task<JsonResult> GetFilteredFuelTicketsAsync(HH_FuelTkt_Input id)
{
try
{
IEnumerable<HH_FuelTkt_Output> fto = await db.GetFilteredFuelTicketsAsync(id);
return Json(fto, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
strRemedyTktResponse = IssueRemedyTicket("Class: FuelTktController" + CrLf + "Method: GetFilteredFuelTickets" + CrLf + "Error: " + ex.Message + CrLf + "InnerException: " + ex.InnerException + CrLf + "Source: " + ex.Source + CrLf + "StackTrace: " + ex.StackTrace);
LogMessage.WriteEventLog("Class: FuelTktController" + CrLf + "Method: GetFilteredFuelTickets" + CrLf + "Error: " + ex.Message + CrLf + "InnerException: " + ex.InnerException + CrLf + "Source: " + ex.Source + CrLf + "StackTrace: " + ex.StackTrace, "FuelTktController", 1, strRemedyTktResponse);
return null;
}
}
在我的客户端，我可以看到结果中的数据。 有人可以告诉我我在这里缺少什么来填充网格吗？？？ 下面是我的网格代码，下面是返回的数据：
if (begDte <= endDte) {
$('#fuelTickets').jqGrid({
caption: "Fuel Tickets",
colModel: [
{ name: 'FuelTkt_ID', index: 'FuelTkt_ID', label: 'ID', width: 20, align: "right", editable: false },
{ name: 'Ticket_No', index: 'Ticket_No', label: 'Ticket', width: 60, align: "right", editable: false },
{ name: 'Customer_Name', index: 'Customer_Name', label: 'Customer', width: 150, editable: false },
{ name: 'Vehicle_No', index: 'Vehicle_No', label: 'Vehicle', width: 60, editable: false },
{ name: 'Trans_Timestamp', index: 'Trans_Timestamp', label: 'Date', width: 100, editable: false },
{ name: 'Image_ID', index: 'Image_ID', label: 'Image ID', width: 150, editable: false }
],
pager: false,
viewRecords: true,
gridview: true,
autoWidth: true,
emptyRecords: "No records found",
onCellSelect: function (rowid, iCol, cellcontent) {
var grid = $('#fuelTickets');
var imageID = grid.jqGrid('getCell', rowid, 'Image_ID');
if (imageID != "")
DisplayReceipt(imageID);
}
})
var HH_FuelTkt_Input = {
Vehicle_No: $('#txtVehicleNbr').val(),
Customer_Name: $('#txtCustomerName').val(),
Trans_Timestamp_Begin: $('#dteBeginDate').val(),
Trans_Timestamp_End: $('#dteEndDate').val()
};
$.ajax({
url: '@Url.Action("GetFilteredFuelTicketsAsync")',
type: 'POST',
data: JSON.stringify(HH_FuelTkt_Input),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
var grid = $("#fuelTickets");
grid.clearGridData();
grid.addRowData(result);
},
error: function (jqXHR, jqXHR, textStatus, errorThrown) {
alert("No record found: " + "textStatus: " + textStatus + "\r\n" + "errorThrown: " + errorThrown);
}
});
}
这是返回的数据：
[Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456", more...}, Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456", more...}]
0
Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456", more...}
1
Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456", more...}
以下是个人记录：
0
Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456", more...}
Customer_Name
"X"
FuelTkt_ID
2
Image_ID
"12345"
Ticket_No
6460193
Trans_Timestamp
"/Date(1395238800000)/"
Vehicle_No
"123456"
1
Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456", more...}
Customer_Name
"X"
FuelTkt_ID
3
Image_ID
"22856"
Ticket_No
6460194
Trans_Timestamp
"/Date(1395246000000)/"
Vehicle_No
"123456"
正确的代码： 而不是处理关于网格的“header”的过于复杂的文档，以下解决了所有的问题，而没有对我的任何更改服务器代码（无需在此处放置任何分页）。只需要 一个 语句来填充 jqGrid 文档中从未提及的网格。
实际上，这里的文档中提到了它，但从未在一个示例中使用它，这会使它更容易理解。
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
我发布的内容是为了让所有人都能看到并受益于这种缺乏文档和标题过于复杂的情况。
下面填充网格的 js 中最重要的语句如下：
$("#fuelTicketsGrid")[0].addJSONData(data);
就是这样！
HTML
<div>
<table id="fuelTicketsGrid" class="table"></table>
<div id="GridPager"></div>
</div>
JS
function LoadGridData() {
var HH_FuelTkt_Input = {
Vehicle_No: $('#txtVehicleNbr').val(),
Customer_Name: $('#txtCustomerName').val(),
Trans_Timestamp_Begin: $('#dteBeginDate').val(),
Trans_Timestamp_End: $('#dteEndDate').val()
};
$.ajax({
url: '@Url.Action("GetFilteredFuelTicketsAsync", "Home")',
type: 'post',
data: JSON.stringify(HH_FuelTkt_Input),
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
$("#fuelTicketsGrid")[0].addJSONData(data);
},
error: function (jqXHR, jqXHR, textStatus, errorThrown) {
alert("No record found: " + "textStatus: " + textStatus + "\r\n" + "errorThrown: " + errorThrown);
}
});
}
$('#fuelTicketsGrid').jqGrid({
jsonReader: { root: 'tkts', repeatitems: true },
width: 'auto',
height: 'auto',
autowidth: true,
rownumbers: false,
rownumWidth: 30,
rowNum: 10,
rowList: [5, 10],
edit: false,
viewRecords: true,
gridview: true,
caption: "Fuel Tickets",
pager: '#GridPager',
onCellSelect: function (rowid, iCol, cellcontent) {
var grid = $('#fuelTicketsGrid');
var imageID = grid.jqGrid('getCell', rowid, 'Image_ID');
if (imageID != "")
DisplayReceipt(imageID);
},
colModel: [
{ name: 'FuelTkt_ID', label: 'ID', width: 20, align: "right" },
{ name: 'Ticket_No', label: 'Ticket', width: 60, align: "right" },
{ name: 'Customer_Name', label: 'Customer', width: 150 },
{ name: 'Vehicle_No', label: 'Vehicle', width: 60 },
{ name: 'Trans_Timestamp', label: 'Date', width: 100, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'Image_ID', label: 'Image ID', width: 150 },
]
});
$('#fuelTicketsGrid').jqGrid('navGrid', '#GridPager', { add: false, edit: false, del: false, search: false, refresh: false });
【问题讨论】：
标签： jquery asp.net-mvc json jqgrid asp.net-ajax