Don't get data in jquery grid in Struts 2
Grid.jsp:
<html>
<head>
<title>jqGrid Example Part 1</title>
<link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css"/>
<link rel="stylesheet" href="ui.jqgrid.css" type="text/css"/>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getGrid() {
alert("I was here");
var jqDataUrl = 'getData.action';
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url : jqDataUrl,
datatype : "json",
gridModel : "gridModel",
// Specify the column names
colNames : ["id", "name"],
// Configure the columns
colModel : [
{ name: "id", index: "id", width: 40, align: "left" },
{ name: "name", index: "name", width: 100, align: "left" }
],
// Grid total width and height
width : 550,
height : 200,
// Paging
toppager : true,
pager : $("#jqTablePager"),
rowNum : 5,
rowList : [5, 10, 20],
viewrecords: true, // Specify if "total number of records" is displayed
// Default sorting
sortname : "Id",
sortorder : "asc",
// Grid caption
caption : "A Basic jqGrid - Read Only"
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
alert("out");
}
</script>
</head>
<body onload="getGrid();">
<div>
<p>hi</p>
<table id="jqTable" class="scroll">
</table>
<div id="jqTablePager"></div>
</div>
</body>
</html>
Mine Struts.xml
is like this
<action name="getData" class="net.viralpatel.contact.view.ContactAction" method="getData">
<result name="success" type="json" >gird.jsp</result>
</action>
I can see the json result when I execute getData.action
like
{
"data" : "success",
"gridModel" : [
{"id": 1, "name": "akhilesh"},
{"id": 0, "name": null}
],
"page" : 1,
"records" : 2,
"rows" : 2,
"searchField" : null,
"searchOper" : null,
"searchString": null,
"sidx" : null,
"sord" : null,
"total" : 2
}
I cannot get the values in my Grid..gridModel mapped correctly to my table.
+3
source to share
1 answer
Instead of defining:
gridModel: "gridModel"
do:
jsonReader : {
repeatitems: false,
root : "gridModel"
}, // Specify the column names
so it should read:
$("#jqTable").jqGrid({
// Ajax related configurations
url : "data.json",
datatype : "json",
jsonReader: {
repeatitems: false,
root : "gridModel"
}, // Specify the column names
colNames : ["id", "name"],
// Configure the columns
colModel : [
{ name: "id", index: "id", width: 40, align: "left" },
{ name: "name", index: "name", width: 100, align: "left" }
],
// Grid total width and height
width : 550,
height : 200,
// Paging
toppager : true,
pager : $("#jqTablePager"),
rowNum : 5,
rowList : [5, 10, 20],
viewrecords: true, // Specify if "total number of records" is displayed
// Default sorting
sortname : "Id",
sortorder : "asc",
// Grid caption
caption : "A Basic jqGrid - Read Only"
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
+1
source to share