jqGrid 未填充来自 Java Servlet 的 JSON 数据

发布于 12-20 12:32 字数 10582 浏览 1 评论 0原文

希望有人能够指出我正确的方向。

我已经浏览了许多与 jqGrid 和 jqGrid 相关的其他帖子。 json 未填充 jqGrid 表(某些链接):

jqGrid - 表未填充来自 json 请求的数据

jgGrid 不显示 json 数据

JSON 和 jqGrid。什么是“userdata”?

jqGrid 使用 JSON 数据呈现表格为空

jqGrid不显示JSON数据

但找不到我的问题的答案。

基本上我想做的是从日志文件中读取事件列表(带有日期和时间信息)并显示在 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);
    }

控制台上的输出(我通过 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>

我将用户数据输出到屏幕并再次验证 json 是否正确。 Firebug 没有任何错误。这是我在渲染页面时看到的屏幕截图的链接: http://tinypic.com/r/acrgus/5

Firebug 控制台 - 参数:

_search false
nd  1323429509833
page    1
rows    10
sidx    dateentry
sord    asc

Firebug 控制台- 响应:

<!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 控制台 - 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] 我的 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 分钟更新一次。一旦获得要显示的基本数据,我将进行更新。

任何帮助表示赞赏。 提前致谢。

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

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.

This is my setup:

[1] My Servlet snippet

@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):

# 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

<!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. I have test json data that corresponds to the json being sent from server. The test data has no problem being rendered (see screen-shot):
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. I will do the updates once I get the basic data to display.

Any help appreciated.
Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

段念尘2024-12-27 12:32:37

如果将需要用于填充网格的数据直接放置在 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>

,如果 global 变量将被设置 (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 的正确正文,但至少还应设置 Content-Type > 响应头application/json

aResponse.setContentType("application/json");

我不使用Java,所以我无法在服务器代码方面为您提供更多帮助。

If you place the data which need be used to fill the grid directly on the HTML page you should not use

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

inside of the HTML body. The data

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

can't be good read by your JavaScript code. 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. By the way the assignment above is initializing. The JSON data are string like the following:

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

The statement var mygriddata = {"total":"1","page":"1",...} defines directly object and not a string. So you can just follow the JavaScript syntax and cab rewrite the code as

<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. The value of datastr can be either string or object. If you want use JSON instead of object initialization you code should be modified to include ' 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:

aResponse.setContentType("application/json");

I don't use Java, so I can't help you in the server code more.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文