• The path is specified in the value attribute

• The index method will be the input point of our controller. It is responsible for displaying the JSP page (view) that contains the layout for displaying the grid, the tool bar and the navigation bar.

Data for display are loaded asynchronously by the jqGrid component. The path is /customer/getdata, to which the getData method is connected.

The getData method contains the additional @ResponseBody annotation for indicating that our method returns the object for serialization into a specific format. The annotation @RequestMapping contains the attribute produces = MediaType.APPLICATION_JSON, directing that the returned object be serialized into the JSON format.

It is in the method that we work with the JqGridCustomer class described earlier. The @RequestParam annotation enables the value of the parameter to be retrieved from the HTTP request. This class method works with GET requests.

• The value attribute in the @RequestParam annotation defines the name of the parameter to be retrieved from the HTTP request.

• The defaultValue attribute supplies the value that is to be used if the HTTP parameter is not specified.

The addCustomer method is used to add a new customer. It is connected with the /customer/create path and, unlike the previous method, it works with the POST request. The method returns {success: true} if the customer is added successfully. If an error occurs, it returns an object with the error message. The addCustomer method works with the CustomerManager business layer method.

The editCustomer method is connected with the /customer/edit path. The method is connected with the /customer/delete path. Both methods operate on existing customer records.

The JSP page for displaying the customer module contains nothing special: the layout with the main parts of the page, the table for displaying the grid and the block for displaying the navigation bar. JSP templates are fairly unsophisticated. If you wish, you can replace them with other template systems that support inheritance.

The ../jspf/head.jspf file contains common scripts and styles for all website pages and the ../jspf/menu.jspf file contains the website’s main menu. Their code is not reproduced here: it is quite simple and you can examine it in the project’s source if you are curious.

The basic logic on the client side is concentrated in the /resources/js/jqGridCustomer.js JavaScript module.

Visual Elements

The jqGrid grid

Each column in jqGrid has a number of properties available. The source code contains comments explaining column properties. You can read more details about configuring the model of jqGrid columns in the ColModel API section of the documentation for the jqGrid project.

The navigation bar

can be created either with edit buttons or without them, using the initPagerWithEditors and initPagerWithoutEditors methods, respectively. The bar constructor binds it to the element with the jqPagerCustomer identifier. The options for creating the navigation bar are described in the Navigator section of the jqGrid documentation.

Functions and Settings for Options

The getEditOptions, getAddOptions, getDeleteOptions functions return the options for the edit, add and delete dialog boxes, respectively.

The url property defines the URL to which the data will be submitted after the OK button in clicked in the dialog box.

The afterSubmit property marks the event that occurs after the data have been sent to the server and a response has been received back.