Hi I am implementing jqGrid with dynamic data returned from the backend, I am following a similar solution as discussed here:
similar stack over flow question
How ever for some reason the cells will not populate the data, I have tried endless different approaches but can't get anyjoy. Below is the code:开发者_StackOverflow社区
$.ajax({
type: "GET",
url: "http://cw-epjdp-d01.tm-gnet.com:10040/wps/PA_Resource_Manager_1/JSONMovementServlet",
dataType: "json",
success: function(result){
var colD = result;
//console.log(colD);
var colN = result.MOVEMENTS.columnNames;
var colM = result.MOVEMENTS.colModelList;
console.log(colN);
$("#movementTable").jqGrid({
datatype: 'local',
data: colD.MOVEMENTS.rows,
colNames: colN,
colModel :colM,
height: "auto",
loadComplete: function(data){
console.log("data loaded...");
},
loadError: function(xhr,status,error){
alert('error');
}
});
},
error: function(x, e){
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
Below is a sample of the JSON returned:
{
"MOVEMENTS": {
"currpage": "1",
"totalpages": "3",
"totalrecords": "8",
"rows": [
{
"id": "uid\u003dAshokPandey",
"cells": [
{
"NAME": "uid\u003dAshokPandey",
"DAY1": "Canary Wharf",
"DAY2": "Holiday",
"DAY3": "Holiday",
"DAY4": "Holiday",
"DAY5": "Holiday",
"DAY6": "Holiday",
"DAY7": "Holiday",
"DAY8": "Holiday",
"DAY9": "Holiday",
"DAY10": "Holiday",
"DAY11": "Holiday",
"DAY12": "Holiday",
"DAY13": "Holiday",
"DAY14": "Holiday"
}
]
},
{
"id": "uid\u003dGarethHarris",
"cells": [
{
"NAME": "uid\u003dGarethHarris",
"DAY1": "Canary Wharf",
"DAY2": "Canary Wharf",
"DAY3": "Canary Wharf",
"DAY4": "Canary Wharf",
"DAY5": "Canary Wharf",
"DAY6": "Canary Wharf",
"DAY7": "Canary Wharf",
"DAY8": "Canary Wharf",
"DAY9": "Canary Wharf",
"DAY10": "Canary Wharf",
"DAY11": "Canary Wharf",
"DAY12": "Canary Wharf",
"DAY13": "Canary Wharf",
"DAY14": "Canary Wharf"
}
]
},
{
"id": "uid\u003dKeithPriddle",
"cells": [
{
"NAME": "uid\u003dKeithPriddle",
"DAY1": "Canary Wharf",
"DAY2": "Canary Wharf",
"DAY3": "Canary Wharf",
"DAY4": "Canary Wharf",
"DAY5": "Canary Wharf",
"DAY6": "Canary Wharf",
"DAY7": "Canary Wharf",
"DAY8": "Canary Wharf",
"DAY9": "Canary Wharf",
"DAY10": "Canary Wharf",
"DAY11": "Canary Wharf",
"DAY12": "Canary Wharf",
"DAY13": "Canary Wharf",
"DAY14": "Canary Wharf"
}
]
},
{
"id": "uid\u003dJonathanPopoola",
"cells": [
{
"NAME": "uid\u003dJonathanPopoola",
"DAY1": "Canary Wharf",
"DAY2": "Sickness",
"DAY3": "Sickness",
"DAY4": "Sickness",
"DAY5": "Sickness",
"DAY6": "Sickness",
"DAY7": "Sickness",
"DAY8": "Sickness",
"DAY9": "Sickness",
"DAY10": "Sickness",
"DAY11": "Sickness",
"DAY12": "Sickness",
"DAY13": "Sickness",
"DAY14": "Sickness"
}
]
},
{
"id": "uid\u003dNaveedZaib",
"cells": [
{
"NAME": "uid\u003dNaveedZaib",
"DAY1": "Canary Wharf",
"DAY2": "Sickness",
"DAY3": "Sickness",
"DAY4": "Sickness",
"DAY5": "Sickness",
"DAY6": "Sickness",
"DAY7": "Sickness",
"DAY8": "Sickness",
"DAY9": "Sickness",
"DAY10": "Sickness",
"DAY11": "Sickness",
"DAY12": "Sickness",
"DAY13": "Sickness",
"DAY14": "Sickness"
}
]
},
{
"id": "uid\u003dPooyanFarahani",
"cells": [
{
"NAME": "uid\u003dPooyanFarahani",
"DAY1": "Canary Wharf",
"DAY2": "Canary Wharf",
"DAY3": "Canary Wharf",
"DAY4": "Canary Wharf",
"DAY5": "Canary Wharf",
"DAY6": "Canary Wharf",
"DAY7": "Canary Wharf",
"DAY8": "Canary Wharf",
"DAY9": "Canary Wharf",
"DAY10": "Canary Wharf",
"DAY11": "Canary Wharf",
"DAY12": "Canary Wharf",
"DAY13": "Canary Wharf",
"DAY14": "Canary Wharf"
}
]
},
{
"id": "uid\u003dWendyBuchta",
"cells": [
{
"NAME": "uid\u003dWendyBuchta",
"DAY1": "Canary Wharf",
"DAY2": "AWOL",
"DAY3": "AWOL",
"DAY4": "AWOL",
"DAY5": "AWOL",
"DAY6": "AWOL",
"DAY7": "AWOL",
"DAY8": "AWOL",
"DAY9": "AWOL",
"DAY10": "AWOL",
"DAY11": "AWOL",
"DAY12": "AWOL",
"DAY13": "AWOL",
"DAY14": "AWOL"
}
]
},
{
"id": "uid\u003dEdwardRios",
"cells": [
{
"NAME": "uid\u003dEdwardRios",
"DAY1": "Canary Wharf",
"DAY2": "Canary Wharf",
"DAY3": "Canary Wharf",
"DAY4": "Canary Wharf",
"DAY5": "Canary Wharf",
"DAY6": "Canary Wharf",
"DAY7": "Canary Wharf",
"DAY8": "Canary Wharf",
"DAY9": "Canary Wharf",
"DAY10": "Canary Wharf",
"DAY11": "Canary Wharf",
"DAY12": "Canary Wharf",
"DAY13": "Canary Wharf",
"DAY14": "Canary Wharf"
}
]
}
],
"colModelList": [
{
"INDEX": "NAME",
"LABEL": "NAME",
"WIDTH": "90",
"NAME": "NAME",
"JSONMAP": "CELLS.0.NAME"
},
{
"INDEX": "Mon Jan 31",
"LABEL": "Mon Jan 31",
"WIDTH": "90",
"NAME": "Mon Jan 31",
"JSONMAP": "CELLS.0.Mon Jan 31"
},
{
"INDEX": "Tue Feb 01",
"LABEL": "Tue Feb 01",
"WIDTH": "90",
"NAME": "Tue Feb 01",
"JSONMAP": "CELLS.0.Tue Feb 01"
},
{
"INDEX": "Wed Feb 02",
"LABEL": "Wed Feb 02",
"WIDTH": "90",
"NAME": "Wed Feb 02",
"JSONMAP": "CELLS.0.Wed Feb 02"
},
{
"INDEX": "Thu Feb 03",
"LABEL": "Thu Feb 03",
"WIDTH": "90",
"NAME": "Thu Feb 03",
"JSONMAP": "CELLS.0.Thu Feb 03"
},
{
"INDEX": "Fri Feb 04",
"LABEL": "Fri Feb 04",
"WIDTH": "90",
"NAME": "Fri Feb 04",
"JSONMAP": "CELLS.0.Fri Feb 04"
},
{
"INDEX": "Sat Feb 05",
"LABEL": "Sat Feb 05",
"WIDTH": "90",
"NAME": "Sat Feb 05",
"JSONMAP": "CELLS.0.Sat Feb 05"
},
{
"INDEX": "Sun Feb 06",
"LABEL": "Sun Feb 06",
"WIDTH": "90",
"NAME": "Sun Feb 06",
"JSONMAP": "CELLS.0.Sun Feb 06"
},
{
"INDEX": "Mon Feb 07",
"LABEL": "Mon Feb 07",
"WIDTH": "90",
"NAME": "Mon Feb 07",
"JSONMAP": "CELLS.0.Mon Feb 07"
},
{
"INDEX": "Tue Feb 08",
"LABEL": "Tue Feb 08",
"WIDTH": "90",
"NAME": "Tue Feb 08",
"JSONMAP": "CELLS.0.Tue Feb 08"
},
{
"INDEX": "Wed Feb 09",
"LABEL": "Wed Feb 09",
"WIDTH": "90",
"NAME": "Wed Feb 09",
"JSONMAP": "CELLS.0.Wed Feb 09"
},
{
"INDEX": "Thu Feb 10",
"LABEL": "Thu Feb 10",
"WIDTH": "90",
"NAME": "Thu Feb 10",
"JSONMAP": "CELLS.0.Thu Feb 10"
},
{
"INDEX": "Fri Feb 11",
"LABEL": "Fri Feb 11",
"WIDTH": "90",
"NAME": "Fri Feb 11",
"JSONMAP": "CELLS.0.Fri Feb 11"
},
{
"INDEX": "Sat Feb 12",
"LABEL": "Sat Feb 12",
"WIDTH": "90",
"NAME": "Sat Feb 12",
"JSONMAP": "CELLS.0.Sat Feb 12"
},
{
"INDEX": "Sun Feb 13",
"LABEL": "Sun Feb 13",
"WIDTH": "90",
"NAME": "Sun Feb 13",
"JSONMAP": "CELLS.0.Sun Feb 13"
}
],
"columnNames": [
"NAME",
"Mon Jan 31",
"Tue Feb 01",
"Wed Feb 02",
"Thu Feb 03",
"Fri Feb 04",
"Sat Feb 05",
"Sun Feb 06",
"Mon Feb 07",
"Tue Feb 08",
"Wed Feb 09",
"Thu Feb 10",
"Fri Feb 11",
"Sat Feb 12",
"Sun Feb 13"
]
}
}
Please note the JSON is valid verified with http://www.jsonlint.com/ I have no choice but use the id that is provided.
Many thanks in advance
check out the demo of loading json data at http://www.trirand.com/blog/jqgrid/jqgrid.html
or the usage of jsonReader at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
In the previous answer I say you that you should use jsonReader parameter of the jqGrid. The usage of ids having "=" character inside is inside is also very bad. If you have for example in the database "uid=AndrewBryant" as the id, you can place just "AndrewBryant" in the JSON data as the HTML id. I disagree if you say that you have "no choice".
In your current example you made so much errors on the server side, and use no jsonReader or localReader that it is difficult to comment there. For example you use cells in the data and "CELLS" in the jsonmap column property which you wrote in the wrong way as JSONMAP. In JavaScript the case of characters is very important. Moreover you use "NAME": "Mon Jan 31" instead of 'name' and an identifier as the value. The identifier can not has blanks. You have of course no data with the property "Mon Jan 31" inside of the JSON data.
At the end you use the data parameter (data: colD.MOVEMENTS.rows) which mean the usage of localReader instead of jsonReader (see here more information about the localReader).
Sorry, but your current code and the data are so dirty and contain so much error, that all looks a garbage and can not work.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论