没有使用Java Servlet中的JSON数据填充jqGrid

Question

Hopefully someone will be able to point me in the right direction. 希望有人能够指出正确的方向。

I have already browsed the many other posts relating to jqGrid & json not populating the jqGrid table (some of the links): 我已经浏览了许多其他有关jqGrid和json的文章，但并未填充jqGrid表（一些链接）：

jqGrid - Table not being populated by data from json request jqGrid-JSON请求中的数据未填充表

jgGrid not displaying json data jgGrid不显示json数据

JSON and jqGrid. JSON和jqGrid。 What is "userdata"? 什么是“用户数据”？

jqGrid with JSON data renders table as empty 带有JSON数据的jqGrid将表呈现为空

jqGrid not displaying JSON data jqGrid不显示JSON数据

but could not find an answer to my problem. 但找不到我的问题的答案。

Basically what I am trying to do is read a list of events from a log file (with date and time info) and display in the jqGrid. 基本上，我想做的是从日志文件中读取事件列表（带有日期和时间信息）并显示在jqGrid中。

This is my setup: 这是我的设置：

[1] My Servlet snippet [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); }

The output on the console (I validated it via jsonlint): 控制台上的输出（我通过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] My JSP [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:

<!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:

 <!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:

<!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:

 <!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:

<!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:

 <!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:

<!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}); });

As you can see from my Javascript. 您可以从我的Javascript中看到。 I have test json data that corresponds to the json being sent from server. 我测试了与从服务器发送的json相对应的json数据。 The test data has no problem being rendered (see screen-shot): http://tinypic.com/r/15s7dyx/5 测试数据没有呈现问题（请参见屏幕截图）： http : //tinypic.com/r/15s7dyx/5

I don't really mind about being able to page the data in the table. 我真的不介意能够分页表格中的数据。 I just want to be able display the data and update it every 5 mins. 我只希望能够显示数据并每5分钟更新一次。 I will do the updates once I get the basic data to display. 一旦显示基本数据，我将进行更新。

Any help appreciated. 任何帮助表示赞赏。 Thanks in advance. 提前致谢。

Answer 1

If you place the data which need be used to fill the grid directly on the HTML page you should not use 如果将需要用于填充网格的数据直接放置在HTML页面上，则不应使用

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

inside of the HTML body. 在HTML正文中。 The data 数据

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

can't be good read by your JavaScript code. 您的JavaScript代码无法很好地读取。 Instead of that you can include in the head of the page something like 除此之外，您可以在页面顶部添加类似

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

In the case the global variable will be set ( window.mygriddata ) and can be used by other JavaScript code placed below in the head. 在这种情况下，将设置全局变量（ window.mygriddata ），并且可以将其放置在头部下方的其他JavaScript代码中使用。 By the way the assignment above is initializing . 顺便说一下，上面的分配正在初始化 。 The JSON data are string like the following: JSON数据是字符串 ，如下所示：

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

The statement var mygriddata = {"total":"1","page":"1",...} defines directly object and not a string. 语句var mygriddata = {"total":"1","page":"1",...}直接定义对象，而不是字符串。 So you can just follow the JavaScript syntax and cab rewrite the code as 因此，您只需遵循JavaScript语法，然后将cab重写为

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

Now you will be able to use datatype:'jsonstring' and datastr: mygriddata to fill the grid. 现在，您将能够使用datatype:'jsonstring'和datastr: mygriddata填充网格。 The value of datastr can be either string or object. datastr的值可以是字符串或对象。 If you want use JSON instead of object initialization you code should be modified to include ' over ${userdata} : 如果要使用JSON而不是对象初始化，则应将代码修改为包括' over ${userdata} ：

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

If you want to use datatype:'json' and get the JSON data from servlet per Ajax, the server code should not write the correct body of the server response HttpServletResponse but additionally at least set the Content-Type of the response header to application/json : 如果要使用datatype:'json'并从每个Ajax的servlet中获取JSON数据，则服务器代码不应编写服务器响应HttpServletResponse的正确主体，但至少应将响应头的Content-Type设置为application/json ：

aResponse.setContentType("application/json");

I don't use Java, so I can't help you in the server code more. 我不使用Java，因此无法在服务器代码方面提供更多帮助。

没有使用Java Servlet中的JSON数据填充jqGrid

问题描述

1 个解决方案

解决方案1
0 2011-12-09 13:21:55

没有使用Java Servlet中的JSON数据填充jqGrid

问题描述

1 个解决方案

解决方案1 0 2011-12-09 13:21:55

解决方案1
0 2011-12-09 13:21:55