how to create Jqgrid using jsp

Question

I am very new in jquery and json.i know jsp and java in my project job i have to implement a data grid same like shows in http://www.trirand.com/blog/jqgrid/jqgrid.html# i this example site i need a datagrid using Json object. i explore all in internet but i cant find any help of that.

please provide me an example with uses jqgrid json using jsp -servlet

Answer 1

I finally converted the PHP code to jsp code of jqgrid:

jQuery(document).ready(function()
    {

    jQuery("#list10").jqGrid({

        url:'griddata.jsp',
    colNames:['Inv No','Date', 'Client'],
        colModel:[{name:'id',index:'id', width:55},{name:'invdate',index:'invdate', width:90},{name:'name',index:'name', width:100}],
    rowNum:10,
    rowList:[5,7,10],
    pager: '#pager10',
    sortname: 'id',
        datatype: 'json',
        viewrecords: true,
        sortorder: "desc",
    multiselect: false,
    imgpath: "themes/basic/images",
    caption: "Invoice Header",
    onSelectRow: function(ids) {

                        jQuery("#list10_d").jqGrid().setGridParam({url : 'getsubdata.jsp?id='+ids}).trigger("reloadGrid")
                        jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids)

                        }

        });

    jQuery("#list10").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});


<!-- subgrid start-->

    jQuery("#list10_d").jqGrid({
                                url:'getsubdata.jsp?id=0',
                                datatype: 'json',
                                colNames:['No','Item', 'Qty', 'Unit','Line Total'],
                                colModel:[
                                        {name:'num',index:'num' },
                                        {name:'item',index:'item'},
                                        {name:'qty',index:'qty',align:"center"},
                                        {name:'unit',index:'unit', align:"center"},     
                                        {name:'linetotal',index:'linetotal',align:"center", sortable:false, search:false}
                                ],
                                rowNum:5,
                                rowList:[5,10,20],
                                pager: '#pager10_d',
                                sortname: 'item',
                                viewrecords: true,
                                sortorder: "asc",
                                multiselect: true,
                                imgpath: "themes/basic/images",
                                caption:"Invoice Detail"
                        }).navGrid('#pager10_d',{add:false,edit:false,del:false});


     }//function
    );//ready

In this code i have created two jsp file .

First one code is below

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String rows=request.getParameter("rows");

        String pageno=request.getParameter("page");
        String cpage=pageno;

        Connection connect = null;
        Statement statement = null;
        PreparedStatement preparedStatement = null;
        ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
        statement = connect.createStatement();
        rs = statement.executeQuery("SELECT * FROM grid ");

        int count=0;
        rs.last();
        count=rs.getRow(); 

        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));

        int limitstart=0;

        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);

        rs = statement.executeQuery("SELECT * FROM grid limit "+limitstart+","+rows);  


        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();

         responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);

        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();

        int i=1;
       while(rs.next())
           {
                cellobj.put("id",rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));

        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        i++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);

%>

And the secound JSP meams getsubdata.jsp file is below:

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String id=request.getParameter("id");
        String rows=request.getParameter("rows");
        String pageno=request.getParameter("page");
        String cpage=pageno;


        JSONObject mysubdata=new JSONObject();
        JSONArray subarray = new JSONArray();
        Connection connect = null;
   Statement statement = null;

 ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
        statement = connect.createStatement();

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"'");  

        int count=0;
        rs.last();
        count=rs.getRow(); 

        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));

        int limitstart=0;

        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"' limit "+limitstart+","+rows);  

        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();

        responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);

        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();

        int ii=1;
       while(rs.next()) 

       {
                cellobj.put("id",""+ii);

                //cell.add(rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));
                cell.add(rs.getString(4));
                cell.add(rs.getString(4));

        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        ii++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);

And the secound JSP meams getsubdata.jsp file is below

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String id=request.getParameter("id");
        String rows=request.getParameter("rows");
        String pageno=request.getParameter("page");
        String cpage=pageno;


        JSONObject mysubdata=new JSONObject();
        JSONArray subarray = new JSONArray();
        Connection connect = null;
   Statement statement = null;

 ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
        statement = connect.createStatement();

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"'");  

        int count=0;
        rs.last();
        count=rs.getRow(); 

        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));

        int limitstart=0;

        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"' limit "+limitstart+","+rows);  

        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();

        responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);

        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();

        int ii=1;
       while(rs.next()) 

       {
                cellobj.put("id",""+ii);

                //cell.add(rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));
                cell.add(rs.getString(4));
                cell.add(rs.getString(4));

        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        ii++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);