A sample project using Spring MVC, Jquery and JQGrid to display the list of Object returned as a JSON object:

Following is a sample project using Spring MVC, Jquery and JQGrid to display the list of Employees returned as a JSON object:

The jsp in screenshot shows the list of employees.

I assume the user already knows how spring MVC works, so I am not explaining how Spring MVC works in this post.

You can download this sample maven project from github. 
https://github.com/SanjayIngole/jqgrid-example-parent

Here is an overview:
1. Jquery makes an Ajax call in Spring Controller method to get the ArrayList of objects (Employees).


 $.when($.getJSON('/jqgridexample/views/web/getemployees')).then(function (data) {

.....
 Rest of the code
....

));

2. In Spring Controller we map a method getEmployees to url '/web/getemployees' called from jquery. 
This method returns the ArrayList of Employees. Spring MVC takes care of converting this to a JSON Object.

@RequestMapping(value = "/web/getemployees", method = RequestMethod.GET)
public @ResponseBody
ArrayList<Employee> getEmployees(HttpServletRequest request) {


final ArrayList<Employee> employees = getMockEmployees();

return employees;
}

3. Jquery receives a list of employees as a JSON object.

[{"empID":100,"firstName":"John","lastName":"Oliver","address":"123 Hollywood Blvd, LA","phone":"4572312222"},{"empID":101,"firstName":"Barack","lastName":"Obama","address":"001 White House, DC","phone":"1010100101"},{"empID":102,"firstName":"Tom","lastName":"Cruise","address":"333 Sunset Blvd, LA","phone":"8272828222"},{"empID":103,"firstName":"Ed","lastName":"Sheeran","address":"6377 Kings Drive, London","phone":"9298292222"}]

4. This list is used to populate the jqgrid. In this case we are mapping individual fields before passing to jqgrid.

$("#employees").jqGrid({
   datatype: "local",
   height: 250,
   width: 700,
   colNames: ['EMPLOYEE ID', 'FIRST NAME', 'LAST NAME', 'ADDRESS', 'PHONE'],
   colModel: [{
       name: 'empID',
       index: 'empID',
       width: 10,
       sorttype: "int"},
   {
       name: 'firstName',
       index: 'firstName',
       width: 50},
   {
       name: 'lastName',
       index: 'lastName',
       width: 50},
   {
       name: 'address',
       index: 'address',
       width: 100},
   {
       name: 'phone',
       index: 'phone',
       width: 10}
   ],
});

var names = ['empID', 'firstName', 'lastName', 'address', 'phone'];
var employeedata = [];

for (var i = 0; i < data.length; i++) {
   employeedata[i] = {};
   employeedata[i][names[0]] = data[i].empID;
   employeedata[i][names[1]] = data[i].firstName;
   employeedata[i][names[2]] = data[i].lastName;
   employeedata[i][names[3]] = data[i].address;
   employeedata[i][names[4]] = data[i].phone;
}

for (var i = 0; i <= employeedata.length; i++) {
   $("#employees").jqGrid('addRowData', i + 1, employeedata[i]);
}

$("#employees").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});

});

This example can be downloaded from github. Please drop me a question if required.

https://github.com/SanjayIngole/jqgrid-example-parent