come creare jqGrid utilizzando jsp

Question

Sono molto nuovo in jQuery e json.i conoscere jsp e java nel mio lavoro di progetto devo implementare una griglia di dati stessi spettacoli come in http://www.trirand.com/blog/jqgrid/jqgrid.html# I Questo esempio sito ho bisogno di un datagrid utilizzando Oggetto Json. esploro tutto in internet ma non posso trovare alcun aiuto.

favore mi forniscono un esempio con impieghi jqGrid JSON utilizzando jsp -servlet

Answer 1

ho finalmente convertito il codice PHP in codice JSP di 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 questo codice ho creato due file JSP.

primo un codice è al di sotto

<%@ 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); 

%> 

e il file secound meams JSP getsubdata.jsp è qui sotto:

<%@ 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); 

E il secound JSP meams file di getsubdata.jsp è al di sotto

<%@ 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); 

Answer 2

Hai davvero esplorato l'intera Internet? Impressionante. Tutte le demo nella pagina demo di jqGrid mostrano il codice necessario, anche il codice lato server. Dovrai semplicemente convertire i loro PHP in codice JSP/Servlet.