Question

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.

I’d like to use the JQuery EasyUI DataGrid 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.

This is an example of how you would set up an empty table and the column headers with the JQuery EasyUI DataGrid:

<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"  
            url="data/datagrid_data.json"  
            singleSelect="true" iconCls="icon-save">  
        <thead frozen="true">  
            <tr>  
                <th field="itemid" width="80">Item ID</th>  
                <th field="productid" width="80">Product ID</th>  
            </tr>  
        </thead>  
        <thead>  
            <tr>  
                <th field="listprice" width="80" align="right">List Price</th>  
                <th field="unitcost" width="80" align="right">Unit Cost</th>  
                <th field="attr1" width="150">Attribute</th>  
                <th field="status" width="60" align="center">Stauts</th>  
            </tr>  
        </thead>  
    </table>  

and this is how you hook your table into the javascript functionality:

$('#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}  
        ]]  
    });  

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 ).

To my understanding the DataGrid would need the data rows wrapped like this

{"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"}
]}

Is that formatting JSon?

I was only able to find 1 – 2 brief 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 Spring Source Blog Entry, but being as new as I am it is just beyond the reach of my understanding. Are there other URLs that would go into more detail of getting JSON sent from Spring?

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.

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.

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.

Thanks much in advance for any help
Have A Good Weekend

Steve

Answer 1

You are pretty close to “getting it”. The only thing you are missing is what to return from your controller method (that is producing the JSON). This blog article gives a good example of what you need to do.

In your case, you need to create two Java beans that mimick the JSON output that the DataGrid is expecting:

public class ResultSet {
    private long total;
    private List<ResultRow> rows;
    // getters & setters, etc
}

public class ResultRow {
    private Int productid;
    private Float unitcost;
    private String status;
    private Float listprice;
    private String attr1;
    // getters & setters, etc
}

So your Controller method would have a return type of ResultSet and would populate the ResultRows and ResultSet from some DB lookup, etc. Then Jackson does its magic to “marshall” that into JSON (via the @ResponseBody annotation).