希望有人能够指出我正确的方向。
我已经浏览了许多其他与 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 片段
<pre><code>@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);
}
</code></pre>
控制台上的输出(我通过 jsonlint 验证了它):
<pre><code># 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"]}]}
</code></pre>
[2]我的JSP
<pre><code><!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>
</code></pre>
<p><code></code></p><code>
<p>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:
<a href="http://tinypic.com/r/acrgus/5" rel="noreferrer noopener nofollow">http://tinypic.com/r/acrgus/5</a></p>
<p>Firebug Console - Parameters:</p>
<pre><code>_search false
nd 1323429509833
page 1
rows 10
sidx dateentry
sord asc
</code></pre>
<p>Firebug Console - Response:</p>
<pre><code><!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>
</code></pre>
<p>Firebug Console - HTML:</p>
<pre><code>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"]}]}
</code></pre>
<p>[3] My JavaScript:</p>
<p></p>
</code><pre><code>$(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});
});
</code></pre>
正如你从我的 Javascript 中看到的。我有与从服务器发送的 json 相对应的测试 json 数据。测试数据渲染没有问题(参见屏幕截图): http://tinypic.com/r/15s7dyx/5
我真的不介意能够对表中的数据进行分页。我只想能够显示数据并每 5 分钟更新一次。一旦获得要显示的基本数据，我将进行更新。
任何帮助表示赞赏。 提前致谢。
最佳答案
如果您将需要用于填充网格的数据直接放置在 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' 并从每个 Ajax 的 servlet 获取 JSON 数据，服务器代码不应编写服务器响应的正确正文 HttpServletResponse 但另外至少将响应 header 的 Content-Type 设置为 application/json:
aResponse.setContentType("application/json");
我不使用 Java，因此我无法在服务器代码方面为您提供更多帮助。
关于java - jqGrid 未填充来自 Java Servlet 的 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8445171/