我有一个jqGrid，它向我的服务器发送ajax请求。但是，我的服务器以完全不同的格式发送json响应（我无法更改它）。因此我需要解析来自服务器的响应，因此我的jqGrid可以正确显示数据。
如果我理解正确，我可以将 ajaxGridOptions 与转换器一起使用。所以，我可以捕获响应并解析它。在我看来，转换器工作正常并正确解析响应。但是，jqGrid不理解我的解析响应。它会永远显示一条消息“正在加载...”（我可以在firebug中看到请求/响应正常，并且控制台中没有javascript错误）。
有人可以帮我吗？
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
</head><body>
<!-- IMPORT JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"></script>
<script>
$(document).ready(function() {
var parsedResponse = '{"currentPage" : "1", "totalRecords" : 5, "pageSize" : 3,'
+ '"myData" :[{"id" : "1", "name" : "Name 1" },'
+ ' { "id" : "3", "name" : "Name 3" },'
+ ' { "id" : "2", "name" : "Name 2" }]'
+ '}';
var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");
$("body").append(myGrid, myPager);
myGrid.jqGrid({
pager : myPager,
// datastr: parsedResponse, // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
// datatype : "jsonstring", // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
serializeGridData : function(data) {
return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"2"}}}';
},
ajaxGridOptions: {
url: "../rush-controller-testing/userAccount/find",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
converters: { "text json": function (responseText) {
// console.log(responseText); // Shows the response string from the cerver
return parsedResponse;
}
},
success: function(data, textStatus, jqXHR ) {
// Nice! It shows 'parsedResponse' from 'converters'. Looks good so far.
console.log(data); console.log(textStatus); console.log(jqXHR);
}
},
colModel : [
{ name : 'name', index : 'id', width : "500"}
],
jsonReader: {
root: "myData", page: "currentPage", records: "totalRecords"
},
rowNum : 3,
viewrecords : true,
height : "auto",
ignoreCase : true,
hidegrid: false
});
});
</script>
</body>
</html>
===更新===
我的服务器响应类似于：
{"UserAccountSearchResult":{
"userAccounts":[{
"userAccountId":18,
"clientAccount":{"clientAccountId":19,"name":"name:5791","firstName":"firstName:5791","lastName":"lastName:5791","active":true},
"userName":"email@824504.com",
"password":"password824504",
"firstName":"firstName824504",
"lastName":"lastName824504",
"isActive":true,
"phoneNumbers":{"phoneNumberId":36,"number":824504824504},
"addresses":{"addressId":126,"country":"CANADA","provinceOrState":"ONTARIO","address":"address824504","city":"Windsor","postalCode":"postalCode824504"},
"emails":{"emailId":36,"email":"secondaryEmail@824504.ca"}
},{
"userAccountId":44,
"clientAccount":{"clientAccountId":45,"name":"name:3136","firstName":"firstName:3136","lastName":"lastName:3136","active":true},
"userName":"email@796312.com",
"password":"password796312",
"firstName":"firstName796312",
"lastName":"lastName796312",
"isActive":true,
"phoneNumbers":{"phoneNumberId":88,"number":796312796312},
"addresses":{"addressId":298,"country":"CANADA","provinceOrState":"ONTARIO","address":"address796312","city":"Greater Sudbury","postalCode":"postalCode796312"},
"emails":{"emailId":88,"email":"secondaryEmail@796312.ca"}
}]
,"pagination":{"pageSize":10,"pageNumber":2,"totalItems":49}}}
所以，我已经有了一个函数来解析这个响应，如下所示。我想在jqGrid中使用这个解析后的响应，因为在我的应用程序中有很多这样的情况：
{"currentPage" : "1", "totalRecords" : 2, "pageSize" : 3,
"myData" :[{
"id" : "1", "name" : "firstName824504", "email" : "secondaryEmail@824504.ca"
},{
"id" : "3", "name" : "firstName796312", "email" : "secondaryEmail@796312.ca"
}]
};
===最终代码===
我得到了它的工作。谢谢您的帮助。这是我的功能示例。我希望将来可以帮助别人。
$(document).ready(function() {
/*
* Here I will have a very complex logic to parse the response from the server in something jqGrid can understand.
* Right now it is just a hard-coded string to make thinks easer to understand
*/
function parseResponse(responseText){
var parsedResponse = '{"currentPage" : "1", "totalRecords" : 5, "pageSize" : 3, "pageTotal" : 2,'
+ '"myData" :[{"id" : "1", "name" : "Name 1" },'
+ ' { "id" : "3", "name" : "Name 3" },'
+ ' { "id" : "2", "name" : "Name 2" }]'
+ '}';
return JSON.parse(parsedResponse);
};
var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");
$("body").append(myGrid, myPager);
myGrid.jqGrid({
pager : myPager,
// datastr: parsedResponse, // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
datatype : "json",
url: "../rush-controller-testing/userAccount/find",
mtype: "POST",
serializeGridData : function(data) {
// That is just a hard-coded example to make things easier to understand. Will change it to a more complex logic later.
return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"3"}}}';
},
ajaxGridOptions: {
contentType: "application/json; charset=utf-8",
},
colModel : [
{ name : 'name', index : 'name', width : "500"}
],
jsonReader: {
repeatitems: false,
root: function(data){
//the actual data
var result = parseResponse(data);
return result.myData;
},
total: function(data) {
//total pages for the query
var result = parseResponse(data);
return result.pageTotal;
},
page: function(data){
//current page of the query
var result = parseResponse(data);
return result.currentPage;
},
records: function(data){
//total number of records for the query
var result = parseResponse(data);
return result.totalRecords;
}
},
rowNum : 3,
viewrecords : true,
height : "auto",
ignoreCase : true,
hidegrid: false
});
});
答案 0 :(得分：2)
您以错误的方式使用jqGrid选项。重要的是要了解jqGrid需要“知道”一些参数，如url和datatype。如果未指定datatype，则将使用默认值"xml"。
您不应覆盖jqGrid 中已存在的ajaxGridOptions参数。所以你应该正确使用jqGrid。如果网址"../rush-controller-testing/userAccount/find"以parsedResponse中包含的格式返回数据，那么您的代码可以是以下内容：
myGrid.jqGrid({
url: "../rush-controller-testing/userAccount/find",
datatype: "json",
mtype: "POST",
pager: "#useraccount-search-datagrid-pager",
serializeGridData : function(data) {
// the function is DUMMY. it MUST be replaced
return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"2"}}}';
},
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
colModel: [
{ name: 'id', key: true, width: 100 }
{ name: 'name', width: 400 }
],
jsonReader: {
root: "myData",
page: "currentPage",
records: "totalRecords",
repeatitems: false
},
rowNum: 3,
gridview: true,
autoencode: true,
viewrecords: true,
height: "auto",
ignoreCase: true,
hidegrid: false
});
确实需要在repeatitems: false内使用jsonReader属性。我认为你不需要使用任何converters的jQuery.ajax。
答案 1 :(得分：0)
查看jqGrid wiki上的data manipulation pages。我认为jsonReader可能就是你要找的东西。