誰かが私を正しい方向に向けることを望みます。jqGridにJavaサーブレットのJSONデータが設定されていません
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テーブルを移入しませjqGrid & JSON(リンクの一部)に関連する他の多くの記事を閲覧しています
jqGrid not displaying JSON data
しかし、私の問題に対する答えを見つけることができませんでした。
基本的には、ログファイル(日付と時刻情報付き)からイベントのリストを読み込み、jqGridに表示します。
これは私の設定です:
[1]私のサーブレットは、(私はjsonlintを経由して、それを検証)コンソール上に出力
@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);
}
スニペット:
# 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分ごとにデータを表示し更新できるようにしたい。基本的なデータが表示されたら更新を行います。
助けてください。 ありがとうございます。あなたがHTMLページ上で直接グリッドを埋めるために使用される必要があるデータを配置する場合
こんにちは@Oleg - あなたの迅速な対応に感謝します。あなたの応答に関してちょっとしたコメントがあります。私は、JSPで
@adrnola:OK、意味は「