2013-09-25 126 views
0

我是jQuery的新手,发现从我的servlet到我的jsp中的jqGrid的数据显示有困难。 我已经使用谷歌gson将数据从ArrayList转换为字符串变量json。 当我运行项目并显示一个空网格时,它在控制台中显示json数据。从servlet到jqGrid的JSON数据不显示

Student.java

package com 
public class Student { 
private String name; 
private String mark; 
private String address; 
//getter and setters 

StudentDataService.java

package com; 

import java.util.ArrayList; 
import java.util.List; 

import com.Student; 

public class StudentDataService { 

public static List<Student> getStudentList() { 

     List<Student> listOfStudent = new ArrayList<Student>(); 

     Student aStudent = new Student(); 

     for (int i = 1; i <= 10; i++) { 

     aStudent = new Student(); 

     aStudent.setName("R" + i); 

     aStudent.setMark("20" + i); 

     aStudent.setAddress("pune "+i); 

     listOfStudent.add(aStudent); 
     } 

     return listOfStudent; 

    } 
} 

我的servlet代码:

StudentDataServlet.java

package com; 

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.List; 

import com.google.gson.Gson; 
import com.google.gson.GsonBuilder; 
import com.Student; 
import com.StudentDataService; 

/** 
* Servlet implementation class StudentDataServlet 
*/ 
public class StudentDataServlet extends HttpServlet { 

private static final long serialVersionUID = 1L; 

public StudentDataServlet() { 
    super(); 
} 

protected void doGet(HttpServletRequest request, 
     HttpServletResponse response) throws ServletException, IOException  { 

    response.setContentType("application/json"); 
    PrintWriter out = response.getWriter(); 

    List<Student> lisOfStudent = StudentDataService.getStudentList(); 
    Gson gson = new GsonBuilder().setPrettyPrinting().create(); 
    String json = gson.toJson(lisOfStudent); 
    out.print(json); 
    System.out.println(json); 

} 

protected void doPost(HttpServletRequest request, 
     HttpServletResponse response) throws ServletException, IOException { 

    doGet(request, response); 
} 
} 

我的JSP页面:

slickGridDemo.jsp

<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>jqGrid Example</title> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ 
libs/jqueryui/1.8.14/jquery-ui.js"> 
</script> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"> 
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale- en.js"></script> 
<script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script> 
<style type='text/css'> 
</style> 



<script type='text/javascript'> 
jQuery(document).ready(function() { 

     jQuery("#grid").jqGrid({ 
      url: "http://localhost:9080/JquerySlickGrid/StudentDataServlet", 
      datatype: "json", 

      jsonReader: {repeatitems: false, id: "ref"}, 
      colNames:['Name','Marks', 'Address'], 
      colModel:[ 
       {name:'Name',index:'Name', width:100}, 
       {name:'Marks',index:'Marks', width:100}, 
       {name:'Address',index:'Address', width:500} 
      ], 
      rowNum:20, 
      rowList:[20,60,100], 
      height:460, 
      pager: "#pagingDiv", 
      viewrecords: true, 
      caption: "Json Example" 
     }); 
    }); 
</script> 
</head> 
<body> 
<table id="grid"></table> 
<div id="pagingDiv"></div> 
</body> 
</html> 

回答

0

起初我有同样的问题。我解决了像将json转换为本地数据,这是我如何将json数据填充到jqgrid中。它可以帮助你。

function getReport() { 
$.ajax({ 
      url : "totalSalesReport.do?method=searchSpendReport" 
    type : "POST", 
    async : false, 
    success : function(data) { 
     $("#gridtable").jqGrid('GridUnload'); 

        var newdata = jQuery.parseJSON(data); 

       $('#gridtable').jqGrid({ 
      data : newdata, 
      datatype : 'local', 
      colNames : [ 'Name', 'Year', 'Period'], 
      colModel : [ { 
       name : 'name', 
       index : 'name' 
      }, { 
       name : 'year', 
       index : 'year' 
      }, { 
       name : 'period', 
       index : 'period' 
      }], 
      rowNum : 10, 
      rowList : [ 10, 20, 50 ], 
      pager : '#pager', 
      shrinkToFit : false, 
      autowidth : true, 
      viewrecords : true, 
      height : 'auto' 
     }).jqGrid('navGrid', '#pager', { 
    add : false, 
    edit : false, 
    del : false, 
    search : false, 
    refresh : false 
}, 

{}, /* edit options */ 
{}, /* add options */ 
{}, /* del options */ 
{}); 
}});} 

让我知道如果您需要进一步的帮助从jsp页面获取数据。

更新答:

我使用JSP的列表数据格式化为JSON阵列。这段代码在下面给出。您需要为此目的添加json对象jar文件。

<%@page import="java.sql.ResultSet"%> 
<%@page import="java.util.*,java.util.ArrayList"%> 
<%@page import="org.json.simple.JSONObject"%> 
<% 
net.sf.json.JSONObject responcedata = new net.sf.json.JSONObject(); 
net.sf.json.JSONArray cellarray = new net.sf.json.JSONArray(); 
net.sf.json.JSONArray cell = null; //new net.sf.json.JSONArray(); 
net.sf.json.JSONObject cellobj = null; //new net.sf.json.JSONObject(); 

List<ReportDto> reportDtos = null; 
if (session.getAttribute("agencyReport") != null) { 
    reportDtos = (List<ReportDto>) session 
    .getAttribute("agencyReport"); 
} 

ReportDto reportDto = null; 

int i = 0; 
if (reportDtos != null) { 
    for (int index = i; index < reportDtos.size(); index++) { 
     reportDto = reportDtos.get(index); 
     cellobj = new net.sf.json.JSONObject(); 
     cell = new net.sf.json.JSONArray(); 
     cellobj.put("name", reportDto.getVendorName()); 
     cellobj.put("year", reportDto.getSpendYear()); 
     cellobj.put("period",reportDto.getReportPeriod()); 
     cellarray.put(cellobj); 
     i++; 
    } 
    out.println(cellarray); 
} 
%> 
+0

仍无法得到关于网格值虽然它显示控制台,当我打印出来。 var newdata = jQuery.parseJSON(data) 它是作为“数据”传递的json字符串吗? 您是从某些struts DispatchAction方法打印值吗?因为我是struts的新手,所以这个URL看起来很熟悉。 – Roikka

+0

是的,我正在使用struts。你可以发布你的json数据吗?没有数据诊断变得很难.. –

+0

我已经更新了我的答案。我正在使用json数组和POJO类(ReportDto)。如果您想使用Json数据,请正确配置您的json map reader。使用以下链接。 [检索数据](http://www.trirand.com/jqgridwiki/doku.php?ID =维基:retrieving_data) –

0

更改colModel名和索引一样的POJO类的变量名

感谢, 阿米特库马尔