jqGrid没有被填充来自Java的JSON数据Servlet

希望有人能够指引我正确的方向。jqGrid没有被填充来自Java的JSON数据Servlet

我已经浏览有关的jqGrid & JSON未填充的jqGrid表（某些环节）的许多其他职位：

jqGrid - Table not being populated by data from json request

jgGrid not displaying json data

JSON and jqGrid. What is "userdata"?

jqGrid with JSON data renders table as empty

jqGrid not displaying JSON data

但无法找到我的问题的答案。

基本上我试图做的是从日志文件（带日期和时间信息）中读取事件列表并显示在jqGrid中。

这是我的设置：

[1]我的servlet片断

 @Override 
    protected void doGet(HttpServletRequest aRequest, 
      HttpServletResponse aResponse, Hashtable aQueryData, 
      LocaleData aLocale) throws ServletException, IOException { 

     System.out.println("doGet(): Received Request: " + aRequest.getServletPath()); 

     // jqGrid expects the JSON data in a predefined format: 
     //  { 
     //   "total": "xxx", 
     //   "page": "yyy", 
     //   "records": "zzz", 
     //   "rows" : [ 
     //    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, 
     //    {"id" :"2", "cell":["cell21", "cell22", "cell23"]}, 
     //    ... 
     //   ] 
     //  } 


     // Calling getLogEntries() method populates logEntries & logEntriesCnt. 
     // logEntries contains the "rows" data as specified above. 
      // For now I am testing with 10 rows of data. 
     getLogEntries(aLocale); 

     JSONObject jqGridData = new JSONObject(); 
     jqGridData.put("total", "1"); 
     jqGridData.put("page", "1"); 
     jqGridData.put("records", String.valueOf(logEntriesCnt-1)); 
     jqGridData.put("rows", logEntries); 

     System.out.println("\n\n# Event Log Entries (" + new Date() + "):" + (logEntriesCnt-1)); 
     System.out.println("jqGrid JSON: \n" + jqGridData.toJSONString()); 

     aRequest.setAttribute("userdata", jqGridData.toJSONString()); 

     aRequest.getRequestDispatcher("/jsp/eventlogtest.jsp").forward(aRequest, aResponse); 
    }

在控制台上的输出（I经由jsonlint验证它）：

 # Event Log Entries (Fri Dec 09 11:02:25 GMT 2011):10 
jqGrid JSON: 
{"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"4","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:30:58","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:21:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:21:58","Monitoring Started"]}]}

[2]我的JSP

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

    <meta http-equiv="Content-Type" content="application/json"> 

    <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css"> 
    <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css"> 

    <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script> 

    <script type="text/javascript" src="/js/grid.locale-en.js"></script> 
    <script type="text/javascript" src="/js/jquery.jqGrid.min.js"></script> 

    <script type="text/javascript" src="/js/eventlog.min.js"></script> 

    <title>jqGrid Test</title> 
</head> 
<body> 
    <h1>jqGrid Test</h1> 

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post"> 

     <div id="logEntries"> 
      userdata = ${userdata} 
     </div> 

     <br/> 
     <br/> 

     <table id="tableGrid"></table> 
     <div id="tablePager"></div> 

     <br/> 
     <br/> 

    </form> 
</body> 
</html> 
 
 I output the userdata to the screen and again validated the json is correct. Firebug does not have any errors. Here is a link to the screen-shot that I see when page is rendered: http://tinypic.com/r/acrgus/5
 Firebug Console - Parameters:
 _search false 
nd 1323429509833 
page 1 
rows 10 
sidx dateentry 
sord asc 
 Firebug Console - Response:
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

    <meta http-equiv="Content-Type" content="application/json"> 

    <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css"> 
    <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css"> 

    <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script> 

    <script type="text/javascript" src="/js/grid.locale-en.js"></script> 
    <script type="text/javascript" src="/js/jquery.jqGrid.min.js"></script> 

    <script type="text/javascript" src="/js/eventlog.min.js"></script> 

    <title>jqGrid Test</title> 
</head> 
<body> 
    <h1>jqGrid Test</h1> 

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post"> 

     <div id="logEntries"> 
      userdata = {"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:18:13","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:18:13","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"4","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:30:58","Monitoring Started"]}]} 
     </div> 

     <br/> 
     <br/> 

     <table id="tableGrid"></table> 
     <div id="tablePager"></div> 

     <br/> 
     <br/> 

    </form> 
</body> 
</html> 
 Firebug Console - HTML:
 jqGrid Test 
userdata = {"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:18:13","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:18:13","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"4","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:30:58","Monitoring Started"]}]} 
 [3] My JavaScript:

$(document).ready(function(){ // Test Data: All entries double quoted var userdatatest1 = { "total":"1", "page":"1", "records":"10", "rows":[ {"id":"1","cell":["08\/12\/11","21:09:19","Communication Established"]}, {"id":"2","cell":["08\/12\/11","21:09:19","Monitoring Started"]}, {"id":"3","cell":["08\/12\/11","21:02:47","Communication Established"]}, {"id":"4","cell":["08\/12\/11","21:02:47","Monitoring Started"]}, {"id":"5","cell":["08\/12\/11","20:51:40","Communication Established"]}, {"id":"6","cell":["08\/12\/11","20:51:40","Monitoring Started"]}, {"id":"7","cell":["08\/12\/11","20:33:24","Communication Established"]}, {"id":"8","cell":["08\/12\/11","20:33:24","Monitoring Started"]}, {"id":"9","cell":["08\/12\/11","20:23:06","Communication Established"]}, {"id":"10","cell":["08\/12\/11","20:23:06","Monitoring Started"]}] }; // jqGrid Options: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options // Pager Options: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager $("#tableGrid").jqGrid({ url:'/eventlogjqgrid', datatype:'jsonstring', //datastr: userdatatest1, colNames:['Date', 'Time', 'Event'], colModel:[ {name:'dateentry',index:'dateentry',width:150,align:"left",sortable:false,editable:false}, {name:'timeentry',index:'timeentry',width:150,align:"left",sortable:false,editable:false} , {name:'evententry',index:'evententry',width:400,align:"left",sortable:false,editable:false} ], rowNum:10, rowList:[10,20,30], sortname:'dateentry', sortorder:'asc', pager: jQuery('#tablePager'), viewrecords: true, caption: 'Event Log' }); jQuery("#tableGrid").jqGrid('navGrid', '#tablePager', {edit:false, add:false, del:false, search:false, refresh:false}); });

正如你可以从我的Javascript看到的。我测试了与从服务器发送的json相对应的json数据。测试数据没有问题呈现（见屏幕截图）： http://tinypic.com/r/15s7dyx/5

我真的不介意能够在表中分页数据。我只想显示数据并每5分钟更新一次。一旦我获得基本数据显示，我会做更新。

任何帮助表示赞赏。在此先感谢。

来源

2011-12-09 adrnola

如果你把它需要被用来直接填写电网的HTML页面上的数据，你不应该使用

<div id="logEntries"> 
    userdata = ${userdata} 
</div>

HTML正文内。数据

<div id="logEntries"> 
    userdata = {"total":"1","page":"1",...} 
</div>

不能很好的被你的JavaScript代码读取。取而代之的是您可以在页面的东西像头

<script type="text/javascript"> 
    var mygriddata = {"total":"1","page":"1",...}; 
</script>

在全球变量将被设置（window.mygriddata），并可以通过在头部放置以下其他JavaScript代码中使用的情况。顺便说一下，上面的任务是初始化。JSON数据是串类似如下：

var mygriddata = '{"total":"1","page":"1",...}';

声明var mygriddata = {"total":"1","page":"1",...}定义直接对象，而不是字符串。所以，你可以只需按照JavaScript语法和驾驶室重写代码为

<script type="text/javascript"> 
    var mygriddata = { 
     total: "1", 
     page: "1"//, ... 
    }; 
</script>

现在，您将能够使用datatype:'jsonstring'和datastr: mygriddata填补了网格。 datastr的值可以是字符串或对象。如果你想使用JSON而不是对象初始化你的代码应该进行修改，以包括'在${userdata}：

<div id="logEntries"> 
    userdata = '${userdata}' 
</div>

如果你想使用datatype:'json'和每阿贾克斯的servlet获得JSON数据，服务器代码不应该写的服务器响应HttpServletResponse的正确的身体，但还至少设置响应头的Content-Type到application/json：

aResponse.setContentType("application/json");

我不使用Java，所以我不能帮你在服务器代码的。

来源

2011-12-09 13:21:55 Oleg

嗨@Oleg - 非常感谢您的快速回复。关于你的回应只是几点意见。我只在JSP

userdata = ${userdata}

中包含以下内容以确保 – adrnola

@adrnola：好吧，'

userdata = ${userdata}

'的含义对我而言还不清楚。无论如何，在使用Firebug的过程中，您不仅要看正文，还要看看HTTP头文件。特别是“内容类型”非常重要。我建议你另外在网格中包含'loadError'句柄来查看可能的错误。有关详细信息，请参阅[答案]（http://stackoverflow.com/a/6969114/315935）。 – Oleg

jqGrid没有被填充来自Java的JSON数据Servlet

回答

相关问题