Как сопоставить данные ячейки с моделью столбца, если модель столбца в ответе JSON?

Question

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

Проблема в том, что у меня

Данные не отображаются в сетке. Как мне сопоставить cells.value с каждым столбцом?

JSON

{
    "colModel": [
        {
            "name": "ID",
            "index": "ID",
            "width": 60,
            "align": "left"
        },
        {
            "name": "First Name",
            "index": "First Name",
            "width": 140,
            "align": "left"
        },
        {
            "name": "Last Name",
            "index": "Last Name",
            "width": 160,
            "align": "left"
        }
    ],
    "colNames": [
        "ID",
        "First Name",
        "Last Name"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345"                     
                            },
                            {
                                "value":"David"
                            },
                            {                           
                                "value":"Smith"                     
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

Определение JQGrid

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "jqgrid.json",
        data: "",
        dataType: "json",
        success: function(result){
            var columnData = result.mypage.outerwrapper.innerwrapper.rows,
                columnNames = result.colNames,
                columnModel = result.colModel;

            $("#dataGrid").jqGrid({
                jsonReader: {
                    root: "result.mypage.outerwrapper.innerwrapper.rows",
                    cell: "result.mypage.outerwrapper.innerwrapper.rows.cells",
                    repeatitems: true,
                    page: "result.mypage.outerwrapper.page",
                    total: "result.mypage.outerwrapper.total",
                    records: "result.mypage.outerwrapper.records"
                },
                datatype: 'local',
                data: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                gridview: true,
                pager: "Pager",
                height: "auto",
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true
            });
        }
    });
    $("#dataGrid").jqGrid('navGrid','#Pager');  
});

Answer 1

В своем текущем вопросе вы продолжаете с чрезвычайно экзотическим JSON-форматом входных данных.

Прежде всего, я рекомендую никогда не использовать столбцы, имеющие метасимволы в значении name свойства в colModel. В вашем случае вы использовали "name": "First Name" и "name": "Last Name", что может привести к серьезным проблемам. Вам следует заменить свойство name на имена типа "name": "FirstName".

Следующая проблема заключается в том, что ваши данные могут быть прочитаны только при использовании свойства jsonmap colModel. Таким образом, вы должны определить свойство во входных данных JSON. Кроме того, вы не можете использовать jsonmap свойство colModel вместе с datatype: 'local'. Таким образом, вы должны либо преобразовать информацию из result.mypage.outerwrapper.innerwrapper.rows части ввода JSON в какой-то более читаемый формат, либо использовать datatype: 'jsonstring'.

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

{
    "colModel": [
        {
            "name": "ID",
            "index": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value"
        },
        {
            "name": "FirstName",
            "index": "FirstName",
            "width": 140,
            "align": "left",
            "jsonmap": "cells.1.value"
        },
        {
            "name": "LastName",
            "index": "LastName",
            "width": 160,
            "align": "left",
            "jsonmap": "cells.2.value"
        }
    ],
    "colNames": [
        "ID",
        "First Name",
        "Last Name"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345"                     
                            },
                            {
                                "value":"David"
                            },
                            {                           
                                "value":"Smith"                     
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

и код следующего

$.ajax({
    type: "GET",
    url: "SK11-4.json",
    data: "",
    dataType: "json",
    success: function (result) {
        var columnData = result.mypage.outerwrapper,
            columnNames = result.colNames,
            columnModel = result.colModel;

        $("#dataGrid").jqGrid({
            datatype: 'jsonstring',
            datastr: columnData,
            colNames: columnNames,
            colModel: columnModel,
            jsonReader: {
                root: 'innerwrapper.rows',
                repeatitems: false
            },
            gridview: true,
            pager: "Pager",
            height: "auto",
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            viewrecords: true
        });
    }
});
$("#dataGrid").jqGrid('navGrid', '#Pager');

В результате вы получите демо , которое работает.

Answer 2

Вот пример из моего недавнего проекта (НЕ ЗАБЫВАЙТЕ HTML TAGS!):

 <table id="campaignGuidance"></table>

 <script>
  $("#campaignGuidance").jqGrid({
        url: '[PUT THE URL FOR YOUR JSON HERE]',
        datatype: "json",
        colNames: ['Status', 'Category', 'Description', 'Details', 'Ad/RM', 'Available'],
        colModel: [
            { name: 'Status', index: 'Status', width: 40, colName: 'Status', canHide: true, hidden: false },
            { name: 'Category', index: 'Category', width: 150, colName: 'Category' },
            { name: 'Description', index: 'Description', width: 200, colName: 'Description', canHide: true, hidden: false },
            { name: 'Details', index: 'Details', width: 200, colName: 'Details', canHide: true, hidden: false },
            { name: 'AdOrRm', index: 'AdOrRm', width: 70, colName: 'Ad/RM', canHide: true, hidden: false },
            { name: 'Available', index: 'Available', width: 110, colName: 'Available', canHide: true, hidden: false }
        ],

        ondblClickRow: function (id) { actions.viewCGDetails(id); },
        rowNum: 1000,
        autowidth: false,
        height: 700,
        width: 1900,
        rowList: [2, 5, 10, 20, 30],
        rowTotal: 2000,
        loadonce: true,
        viewrecords: true,
        caption: "CGD"
    });
</script>