Announcement Announcement Module
Collapse
No announcement yet.
Display Json array data in jqGrid Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Display Json array data in jqGrid

    I'm developing web based project with Spring MVC, hibernate & jquery with jetty server..
    i want to display data regarding to json response.
    here is my Json method in Controller Class.(i need show Harbors' details in my grid)

    @Entity
    @Table(name="HARBOUR")
    public class Harbour {

    @Id
    @Column(name="HARBOUR_ID")
    @GeneratedValue
    private Integer harbourId;

    @Column(name="HARBOURCODE")
    private String harbourCode;

    @Column(name="HARBOURNAME")
    private String harbourName;

    @Column(name="STREETNO")
    private String streetNo;

    @Column(name="STREETONE")
    private String streetOne;

    @Column(name="STREETTWO")
    private String streetTwo;

    @Column(name="CITYNAME")
    private String cityName;

    @Column(name="PROVINCE")
    private String province;

    @Column(name="ALL_ID")
    private String allocationId; & Getter & Setters

    & this is my Controller Class Method that is used to generate json array as response

    @RequestMapping("/selectHarbour")
    public ModelAndView selectHarbour(Map<String, Object> map,HttpServletRequest request,
    HttpServletResponse response) {
    try {

    List <Harbour> list= harbourService.listHarbour();
    JSONArray jsonArray=new JSONArray();
    for(Harbour harbour:list){
    JSONArray array=new JSONArray();
    array.put(harbour.getHarbourId());
    array.put(harbour.getHarbourCode());
    array.put(harbour.getHarbourName());
    array.put(harbour.getCityName());
    array.put(harbour.getProvince());
    jsonArray.put(array);
    }
    response.getWriter().write(jsonArray.toString());
    return null;
    }catch(Exception exception){
    System.out.println("error is "+exception);
    }
    return null;
    }

    And finally this is my Jquery for generate jqGrid.

    <td colspan="2">
    <!-- Insert Data Tables -->
    <table id="list5"></table>
    <div id="pager5"></div>
    <br />
    <a href="#" id="a1">Get data from selected row</a>
    <br />
    </td>

    <script type="text/javascript">
    jQuery("#list5").jqGrid({
    url:'selectHarbour.html',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
    {name:'id',index:'id', width:55},
    {name:'invdate',index:'invdate', width:90},
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right"},
    {name:'tax',index:'tax', width:80, align:"right"},
    {name:'total',index:'total', width:80,align:"right"},
    {name:'note',index:'note', width:150, sortable:false}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager5',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"Simple data manipulation",
    editurl:""
    }).navGrid("#pager5",
    {edit:false,add:false,del:false});
    jQuery("#a1").click( function(){
    var id = jQuery("#list5").jqGrid('getGridParam','selrow');
    if (id) {
    var ret = jQuery("#list5").jqGrid('getRowData',id);
    alert("id="+ret.id+" invdate="+ret.invdate+"...");
    } else { alert("Please select row");}
    });
    </script>



    &

    > Firebug shows my response like this..

    [[5,"CLM","Colombo","Colombo","Western"],[6,"HMB","Hambanthota","Colombo 07","Southern"]]

    Then friends what is my error.? ? ?
Working...
X