jqgrid не может отображать данные json

это действительно сводит меня с ума, я прочитал вопрос:

  1. как отображать jqgrid из URL (локальные данные работают, данные URL — нет)
  2. jqGrid не отображает данные JSON
  3. jqGrid не отображает данные JSON
  4. jgGrid не отображает данные json

ни один из них не работает для моего случая. я уже проверяю свой json на http://jsonlint.com/ и там написано valid JSON. я хочу, чтобы jqgrid отображал таблицу из localhost/mine/jqgrid/json, которая будет выводить:

[{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
{"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
{"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
{"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
{"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}]

и это мой сценарий:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {nocache}
        <title>{$title}</title>
        {/nocache}
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!--jqGrid sangat tergantung kepada CSS jquery-ui-->
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/jquery-ui-custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/ui.jqgrid.css" />  
        <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 1em;
        }
        </style> 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery-ui-custom.min.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
        <!--prevent Smarty to parsing--> 
         {literal}
        <script type="text/javascript">
        $(function(){ 
          $("#list").jqGrid({
            //ini buat paging, value nya adalah ID dari HTML
            pager: '#pager',
            url:'localhost/mine/jqgrid/json',
            datatype: "json",
            height: 300,
            colNames:['ID','Inv Date','Name', 'Note','Amount','Tax','Total'],
            /**
             * to able to sort the right way, u must include sorttype:'int' for integer field
             */
            colModel :[ 
              {name:'id', index:'id',width:20, sorttype:'int'},
              {name:'invdate', index:'invdate', width:55}, 
              {name:'name', index:'name', width:90}, 
              {name:'note', index:'note', width:80, align:'right'}, 
              {name:'amount', index:'amount', width:80, align:'right'}, 
              {name:'tax', index:'tax', width:80, align:'right'}, 
              {name:'total', index:'total', width:150, sortable:true} 
            ],
            rowNum: 10,
            rowList:[10,20,30,40,50],
            recordpos: 'right',
            viewrecords: true,
            sortorder: "desc",
            sortname: "id",
            sorttype: "integer",
            viewrecords: true,
            multiselect: false,
            caption: "Manipulating JSON Data",
            recordtext: "Lihat {0} - {1} dari {2}",
            emptyrecords: "Tidak ada data",
            loadtext: "Loading...",
            pgtext : "Page {0} of {1}",
            jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},    
          });
        });
        </script>
        {/literal}
        <!--end of parsing-->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!--this is it, jqGrid load in here-->
        <table id="list"><tr><td/></tr></table> 
        <div id="pager"></div> 
        <!--end of jqGrid-->
        <p>{#app_name#}</p>
    </body>
</html>

пожалуйста, помогите мне решить это, спасибо заранее.


json jqgrid jqgrid-php
person Bari    schedule 21.03.2013    source источник
comment
Здесь у вас есть правильный ответ: jqGrid не отображает данные JSON. Ваши данные не содержат информации о подкачке, поэтому вы должны поместить определения page, total и records в свой jsonReader. Я чувствую необходимость пометить его как возможный дубликат.   -  person tpeczek    schedule 21.03.2013
comment
я все еще ничего не получил. стол по-прежнему пуст.   -  person Bari    schedule 21.03.2013
comment
Можете ли вы проверить (с помощью Fiddler, FireBug и т. д.), что запрос выполняется и возвращается правильный ответ?   -  person tpeczek    schedule 21.03.2013
comment
я не знаю, как проверить с помощью firebug, но у меня есть скриншот i49.tinypic.com/ 17x2es.png   -  person Bari    schedule 21.03.2013
comment
Ну, скриншот мало что говорит, кроме того факта, что URL-адрес был создан неправильно, это http://localhost/mine/jqgrid/localhost/mine/jqgrid/json, что, как я полагаю, не то, что вы намеревались. Измените конфигурацию следующим образом: url:'http:/localhost/mine/jqgrid/json',. Если дело доходит до FireBug, вам следует заглянуть на вкладку Net, там вы должны увидеть все подробности о каждом запросе.   -  person tpeczek    schedule 21.03.2013
comment
когда я меняю URL-адрес: 'localhost/mine/jqgrid/json', появляется всплывающее окно и дает мне предупреждение: запрошенный URL-адрес /localhost/mine/jqgrid/json не найден на этом сервере. но я меняю на url: 'json', и теперь все в порядке. но все же таблица не отображает мой json, также я вижу ответ json в firebug.   -  person Bari    schedule 21.03.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что код, который вы разместили, почти правильный. В демо используются ваши данные JSON и почти ваш код. Он отображает

введите здесь описание изображения

Я удалил только дубликаты опции viewrecords и изменил height: 300 на height: "auto", чтобы лучше выглядеть. Я бы рекомендовал вам использовать loadonce: true, если вы загружаете все данные сразу с сервера. В случае, если datatype будет изменено на "local" после первой загрузки данных с сервера и вся последующая сортировка, разбиение на страницы и фильтрация данных будут осуществляться локально.

Я не знаю, какая ошибка в вашем коде. Одной из возможных причин может быть неправильный заголовок HTTP в ответе сервера, поэтому ответ JSON будет интерпретироваться jQuery как данные XML или HTML. Я рекомендую вам дополнительно включить обратный вызов loadError, чтобы иметь больше информации об ошибке, если сетка все еще остается пустой. Подробнее см. ответ.

Кстати, я разместил предложение (см. src-файл), который позволяет автоматически определять различные варианты входного формата JSON. Надеюсь, что trirand примет предложение и вопросов о проблемах с чтением JSON-данных станет намного меньше.

person Oleg    schedule 21.03.2013
comment
спасибо за Ваш ответ. я пробовал [ссылка]stackoverflow.com/a/6969114/315935, и браузер говорит, что ошибка состояния текста кода состояния HTTP 0 вызвана ошибкой . что происходит? - person Bari; 21.03.2013
comment
@barreybunshin: я рекомендую вам использовать Fiddler или Firebug или Инструменты разработчика IE или Chrome для перехвата HTTP-трафика. Важно, какое значение имеет Content-Type HTTP-заголовок в ответе сервера. Должно быть application/json. - person Oleg; 21.03.2013
comment
Я проверил это с помощью firebug и получил данные JSON в консоли> All> Response. но все равно стол пустой. я меняю URL-адрес на URL-адрес: «json», и статус в порядке. всплывающее окно с ошибкой не появляется. - person Bari; 21.03.2013
comment
Важно не тело ответа HTTP, а заголовки HTTP. Вы должны изучить заголовки ответа HTTP и найти значение Content-Type. См. раздел Проверка заголовков HTTP в документации Firebug. - person Oleg; 21.03.2013
comment
@barreybunshin: Вы можете видеть, что демонстрация действительно отображает данные в сетки. Вы можете более подробно сравнить точный HTTP-ответ вашего демо с моим. Даже если сервер возвращает Content-Type: text/plain, jQuery do может правильно прочитать данные. Неясно, какие версии jqGrid, jQuery и jQuery UI вы используете. Если Content-Type: application/json в ответе сервера, все версии jQuery правильно прочитают ответ. - person Oleg; 21.03.2013
comment
о, ты мужчина. наконец, таблица, отображающая данные. это потому, что я добавил jquery.jqGrid.src-dynamicReader1.js как ваше предложение. Спасибо огромное. :) - person Bari; 22.03.2013

arrow_upward
0
arrow_downward

Ваши данные json должны быть такими

{
"page":"1",
   "total":2,
   "records":"13", 
   "rows": [{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
            {"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
            {"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
            {"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
            {"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}] 
}

И изменить

jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},

to 

jsonReader : { 
             repeatitems: false,
             id: "id"
             },
person Kris    schedule 21.03.2013