title: Spring 3.1 And The JQuery EasyUI DataGrid : Sending A List of HashMaps, Examples?
body: <p>I've been converting a Java Servlet based webapp as a means of learning Spring.  I have a JSP where a big table of data is being printed out.  I'm using a Spring Controller function to return a big fat String of the data wrapped in HTML table rows to the JSP where it is deposited into a scrolling div.</p>
  
  <p>I'd like to use the <a href="http://www.jeasyui.com/tutorial/datagrid/datagrid5.php" rel="nofollow">JQuery EasyUI DataGrid</a> instead, but I am also new to Ajax, JQuery and JSON, so I am scratching my head a bit as to how to put it altogether.</p>
  
  <p>This is an example of how you would set up an empty table and the column headers with the JQuery EasyUI DataGrid:</p>
  
  <pre><code>&lt;table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"  
              url="data/datagrid_data.json"  
              singleSelect="true" iconCls="icon-save"&gt;  
          &lt;thead frozen="true"&gt;  
              &lt;tr&gt;  
                  &lt;th field="itemid" width="80"&gt;Item ID&lt;/th&gt;  
                  &lt;th field="productid" width="80"&gt;Product ID&lt;/th&gt;  
              &lt;/tr&gt;  
          &lt;/thead&gt;  
          &lt;thead&gt;  
              &lt;tr&gt;  
                  &lt;th field="listprice" width="80" align="right"&gt;List Price&lt;/th&gt;  
                  &lt;th field="unitcost" width="80" align="right"&gt;Unit Cost&lt;/th&gt;  
                  &lt;th field="attr1" width="150"&gt;Attribute&lt;/th&gt;  
                  &lt;th field="status" width="60" align="center"&gt;Stauts&lt;/th&gt;  
              &lt;/tr&gt;  
          &lt;/thead&gt;  
      &lt;/table&gt;  
  </code></pre>
  
  <p><strong>and this is how you hook your table into the javascript functionality:</strong></p>
  
  <pre><code>$('#tt').datagrid({  
          title:'Frozen Columns',  
          iconCls:'icon-save',  
          width:500,  
          height:250,  
          url:'data/datagrid_data.json',  
          frozenColumns:[[  
              {field:'itemid',title:'Item ID',width:80},  
              {field:'productid',title:'Product ID',width:80},  
          ]],  
          columns:[[  
              {field:'listprice',title:'List Price',width:80,align:'right'},  
              {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
              {field:'attr1',title:'Attribute',width:100},  
              {field:'status',title:'Status',width:60}  
          ]]  
      });  
  </code></pre>
  
  <p>My first question is, in the example above, in the "url" attribute would I put a url like "/getTabularData" that in turn would be mapped to a function in a Spring 3.1 controller?   If so, what would trigger the DataGrid to send a request to that URL( the documentation is a bit minimalist ).</p>
  
  <p>To my understanding the DataGrid would need the data rows wrapped like this</p>
  
  <pre><code>{"total":28,"rows":[
      {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
  ]}
  </code></pre>
  
  <p>Is that formatting JSon?</p>
  
  <p>I was only able to find 1 - 2 <em>brief</em> examples of a Spring 3.1 Controller method sending data back as JSON.  Basically the only thing different is that the return type would have a @ResponseBody in it.  I found this <a href="http://blog.springsource.org/2010/01/25/ajax-simplifications-in-spring-3-0/" rel="nofollow">Spring Source Blog Entry</a>, but being as new as I am it is <em>just</em> beyond the reach of my understanding.  Are there other URLs that would go into more detail of getting JSON sent from Spring?</p>
  
  <p>Right now, my app, is retrieving the data from our database as a List of LinkedHashMaps, which are then dropped into a homemade function to iterate through that wrapping each LinkedHashMap into an HTML TR, concetenating it all into a StringBuffer.</p>
  
  <p>If I was to use the JQuery EasyUI DataGrid, what would be a good approach for taking my List of LinkedHashMap objs, getting it into JSON and getting it returned from Spring to the jsp and into the DataGrid.</p>
  
  <p>I hate to ask such a big "show me how" question, but I haven't been able to find more than tiny bits of information via Google and I am new to all of the things I am using.</p>
  
  <p>Thanks much in advance for any help
  Have A Good Weekend</p>
  
  <p>Steve</p>