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

回答

相關問題