Пустой Jqgrid при извлечении данных JSON из полноценного веб-сервиса с использованием сервера restx

Question

Я включил следующие библиотеки файлов:

<script src="JQuery/jquery-1.5.1.js" type="text/javascript"></script>
<script src="jQuery/src/i18n/grid.locale-en.js" type="text/javascript" charset="utf-8"> </script>
<script src="JQuery/jqgrid_demo38/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="JQuery/js/jquery.jqGrid.src.js" type="text/javascript"></script>

Использование следующего кода для создания сетки:

jQuery(document).ready(function(){
    jQuery("#list2").jqGrid({
        url: 'http://localhost:8001/resource/abc/entries',
        mtype: 'GET',
        datatype: "json",
        colNames: ['Trans ID', 'ACC ID', 'Day ID', 'Date', 'Balance'],
        colModel: [
            { name: 'Trans_ID', index: 'Trans_ID', width: 130 },
            { name: 'ACC_ID', index: 'ACC_ID', width: 100 },
            { name: 'Day_ID', index: 'Day_ID', width: 100 },
            { name: 'Summary_Date', index: 'Summary_Date', width: 90 },
            { name: 'Balance', index: 'Balance', width: 85 }
        ],
        width: 700,
        heigth: 200,
        imgpath: "jqgrid_demo38/themes/redmond/images",
        loadonce: true,
        rownumbers: true,
        rownumWidth: 40,
        gridview: true,
        multiselect: false,
        paging: true,
        pager: jQuery('#pager2'),
        rowNum: 20,
        rowList: [10, 30, 50],
        scrollOffset: 0,
        sortname: 'Summary_Date',
        sortorder: "desc",
        viewrecords: true,
        caption: "Demo"
    });
});

используя следующий код для определения сетки в HTML

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

Страница возвращает пустую сетку с заголовком столбца и без каких-либо данных из службы отдыха

при нажатии на ссылку веб-сервиса, он возвращает следующие данные

[
    {
        "Trans_ID": 1,
        "ACC_ID": 1,
        "Day_ID": 1,
        "Summary_Date": "2011-05-08",
        "Balance": 100.0
    },
    {
        "Trans_ID": 2,
        "ACC_ID": 2,
        "Day_ID": 1,
        "Summary_Date": "2011-04-08",
        "Balance": 50.0
    }
]

Answer 1

Вы сгенерировали неверный формат данных для сетки. Если вы не можете внести какие-либо изменения на стороне сервера, вы должны добавить jsonReader, описанный в ответ .

Как правило, использование сервисов RESTful не означает, что вы должны публиковать полностью чистые данные. jqGrid разработан для поддержки работы с большим набором данных. Таким образом, в запросе, отправляемом на сервер, есть дополнительные параметры о странице, которую необходимо вернуть. Посмотрите на ответ , который более ясно описывает проблему.

Вы используете url: 'http://localhost:8001/resource/abc/entries', что очень плохо. Вы всегда должны использовать url в форме url: '/resource/abc/entries' или в любой другой форме без имени хоста и номера порта. По соображениям безопасности запросы ajax будут заблокированы , если вы попытаетесь обратиться к другому сайту или другому порту. Я рекомендую вам использовать обработчик loadError, чтобы увидеть, какая у вас ошибка. В части «ОБНОВЛЕНО» ответа вы найдете соответствующий код, включая демонстрационный проект, который вы можете загрузить.

ОБНОВЛЕНО: Здесь вы можете найти пример того, как вы можете изменить код jqGrid только для отображения данных, выданных сервером:

$("#list2").jqGrid({
    datatype: 'json',
    url: 'user755360.json',
    colNames: ['Trans ID', 'ACC ID', 'Day ID', 'Date', 'Balance'],
    colModel: [
        { name: 'Trans_ID', index: 'Trans_ID', key:true, width: 130, sorttype:'int' },
        { name: 'ACC_ID', index: 'ACC_ID', width: 100, sorttype:'int' },
        { name: 'Day_ID', index: 'Day_ID', width: 100, sorttype:'int' },
        { name: 'Summary_Date', index: 'Summary_Date', width: 90, formatter:'date',
          sorttype:'date' },
        { name: 'Balance', index: 'Balance', width: 85, formatter:'number',
          sorttype:'number' }
    ],
    rowNum: 20,
    rowList: [10, 30, 50],
    gridview: true,
    pager: '#pager2',
    rownumbers: true,
    viewrecords: true,
    jsonReader : {repeatitems: false,
        root: function(obj) {
            return obj;
        },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    },
    loadonce: true,
    sortname: 'Summary_Date',
    sortorder: "desc",
    height: "100%",
    caption: "Demo"
});