jqGrid не заполняется данными JSON из сервлета Java - PullRequest
Новая
       0

jqGrid не заполняется данными JSON из сервлета Java

1 голос
/ 09 декабря 2011

Надеюсь, кто-нибудь сможет указать мне правильное направление.

Я уже просмотрел множество других постов, касающихся jqGrid & json, не заполняющих таблицу jqGrid (некоторые ссылки):

jqGrid - таблица не заполняется данными из запроса json

jgGrid не отображает данные json

JSON и jqGrid. Что такое "userdata"?

jqGrid с данными JSON отображает таблицу как пустую

jqGrid не отображает данные JSON

но не смог найти ответ на мою проблему.

В основном я пытаюсь прочитать список событий из файла журнала (с информацией о дате и времени) и отобразить в jqGrid.

Это мои настройки:

[1] Мой фрагмент сервлета

</p> <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); }

Вывод на консоль (я проверил его через jsonlint):

</p> <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"]}]}

[2] Мой JSP

</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 = ${userdata} </div> <br/> <br/> <table id="tableGrid"></table> <div id="tablePager"></div> <br/> <br/> </form> </body> </html>

</p> <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="nofollow noreferrer">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

Консоль 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});

});
</code>

Как вы можете видеть из моего Javascript. У меня есть тестовые данные JSON, которые соответствуют JSON, отправляемому с сервера. Тестовые данные без проблем отображаются (см. Снимок экрана): http://tinypic.com/r/15s7dyx/5

Я не против того, чтобы можно было листать данные в таблице. Я просто хочу иметь возможность отображать данные и обновлять их каждые 5 минут. Я сделаю обновления, как только получу основные данные для отображения.

Любая помощь приветствуется. Заранее спасибо.

1 Ответ

0 голосов
/ 09 декабря 2011

Если вы размещаете данные, которые необходимо использовать для заполнения сетки непосредственно на 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 вместо инициализации объекта, ваш код должен быть изменен так, чтобы он включал ' over ${userdata}: 

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

Если вы хотите использовать datatype:'json' и получать данные JSON из сервлета для Ajaxкод сервера не должен записывать правильное тело ответа сервера HttpServletResponse, но дополнительно по крайней мере установить Content-Type заголовка ответа на application/json: 

aResponse.setContentType("application/json");

Я не использую Java, поэтому я не могу помочь вам в коде сервера больше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...