Handsontable ‘Spreadsheet’ talking to SpringMVC

Handsontable is an Excel-like data grid utilizing JQuery. For example, it provides the ability to copy and paste directly to & from Excel. Handsontable itself if very easy to setup. The part I struggled with was passing the data to SpringMVC. So, this post shows how to send data from a Handsontable data grid on the client to a SpringMVC server.

The code for the example is posted here on GitHub.

(Previously I had the code deployed on a CloudBees instance at http://handsontable-springmvc.shaunabram.cloudbees.net, built using a Jenkins instance at https://shaunabram.ci.cloudbees.com/job/Handsontable-SpringMVC, but CloudBees have since unfortunately shut down their free tier).

For this example, the server simply returns the data back to the client where it is displayed in a results section of the same JSP. The data is posted as JSON via a JQuery AJAX call.

The code follows the example posted in the accepted answer in this Stackoverflow question.

In addition to the usual SpringMVC setup, the key parts are:

• Adding a maven pom dependency on Jackson, to handle the Json to Java conversion (automatically detected by SpringMVC)
• Use the SpringMVC @ResponseBody and @RequestBody web binding annotations in your controller methods to ensure that Spring converts the Json to and from your java objects
• Making sure the JQuery Ajax call includes the correct headers and data type, as in:

  
  jQuery.ajax({
      type: "POST",
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
          },
      'dataType': 'json',
      ...
  });
  

Again, the full code of the working example is posted here on GitHub.

Tags: excel, handsontable, JavaScript, jQuery, jsp, spreadsheet, spring, springmvc