JQGrid Данные JSON не могут отображаться в таблице

Question

Я хочу показать данные JSON в моей таблице, как показано здесь: пример

Я использовал этот импорт CSS:

<link rel="stylesheet" href="/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="/css/ui.multiselect.css"/>
<link rel="stylesheet" href="/css/jquery-ui-1.8.1.custom.css"/>

Что импортирует JS:

<script type=text/javascript src="/js/jquery.js"></script>
<script type=text/javascript src="/js/jquery_ui_1.8.1.js"></script>
<script type=text/javascript src="/js/jquery.layout.js"></script>
<script type=text/javascript src="/js/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="/js/ui.multiselect.js"></script>
<script type=text/javascript src="/js/jgrid_4.1.js"></script>
<script type="text/javascript" src="/js/jquery.tablednd.js"></script>
<script type="text/javascript" src="/js/jquery.contextmenu.js"></script>

(некоторые файлы имеют другое имя, но они в порядке)

Я получаю данные JSON с URL-адреса, и когда я проверяю их, они корректно поступают в Firebug. Это мои данные HTML:

<table id="confTable"></table>
<div id="pconfTable"></div>

Это мой скрипт для заполнения данных:

jQuery("#confTable").jqGrid({ ajaxGridOptions : {type:"GET"}, serializeGridData : function(postdata) {
            postdata.page = 1;
            return postdata;
        }, url:'/ui/webapp/conf', datatype: 'json', colNames:['Value','Type', 'Target Module', 'Configuration Group', 'Name', 'Description', 'Identity', 'Version', 'System Id', 'Active'],
            colModel:[
                {name:'value',index:'value', width:55},
                {name:'type',index:'type', width:55},
                {name:'targetModule',index:'targetModule', width:150},
                {name:'configurationGroup',index:'configurationGroup', width:180},
                {name:'name',index:'name asc', width:90},
                {name:'description',index:'description', width:90},
                {name:'identity',index:'identity', width:90},
                {name:'version',index:'version', width:90},
                {name:'systemId',index:'systemId', width:100},
                {name:'active',index:'active', width:100}
            ], rowNum:10, width:980, rowList:[10,20,30], pager: '#pconfTable', sortname: 'name', viewrecords: true, sortorder: "desc", caption:"Configuration Information" });
        jQuery("#pconfTable").jqGrid('navGrid', '#pconfTable', {edit:false,add:false,del:false});

Это данные JSON, которые я получаю:

[{
        "value":"10",
        "type":"Tip 1",
        "targetModule":"Target 1",
        "configurationGroup":null,
        "name":"Configuration Deneme 1",
        "description":null,
        "identity":"Configuration Deneme 1",
        "version":0,
        "systemId":0,
        "active":true
    },
    {
        "value":"50",
        "type":"Tip 2",
        "targetModule":"Target 2",
        "configurationGroup":null,
        "name":"Configuration Deneme 2",
        "description":null,
        "identity":"Configuration Deneme 2",
        "version":0,
        "systemId":0,
        "active":true
    },
    {
        "value":"100",
        "type":"Tip 3",
        "targetModule":"Target 3",
        "configurationGroup":null,
        "name":"Configuration Deneme 3",
        "description":null,
        "identity":"Configuration Deneme 3",
        "version":0,
        "systemId":0,
        "active":true
    }
]

Я отформатировал отступ для простого чтения.

Однако я не получаю никакой ошибки от Firebug и не могу импортировать файлы. У меня все еще есть пустая таблица.

Есть идеи?

PS: Что-то не так с моими данными JSON, если я отправлю данные, начинающиеся как: = total: xxx, page: yyy, записи: zzz, строки: или не обязательно?

Answer 1

Чтобы увидеть заполненную сетку, вы должны использовать следующий jsonReader в качестве дополнительного параметра jqGrid

jsonReader: {
    repeatitems: false,
    id: "value",
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

Полагаю, значения из столбца 'value' уникальны, поэтому я использовал id: "value" в jsonReader выше.

Кстати, ajaxGridOptions : {type:"GET"} ничего не делают. По умолчанию mtype: 'GET' делает то же самое. При вызове метода navGrid вы должны использовать jQuery("#confTable") вместо jQuery("#pconfTable").

После описанного изменения у вас будет следующее демо . В демоверсии я добавил height: 'auto', чтобы в сетке было меньше пустого пространства.