jqGrid получил json, но содержит пустые строки и данных

Question

JSON, созданный Spring 3 MVC @ ResponseBody

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": {
                "accountId": 1,
                "userId": 1,
                "transactionId": 6,
                "subCatId": 0,
                "accountName": "Credit Card",
                "remarks": "Movie Hall Pass",
                "amount": 250.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Entertainment"
            }
        },
        {
            "id": "2",
            "cell": {
                "accountId": 2,
                "userId": 1,
                "transactionId": 7,
                "subCatId": 1,
                "accountName": "Savings Bank",
                "remarks": "Part at Besand Nagar",
                "amount": 5000.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Dine Out"
            }
        }
    ]
}

Код инициализации JQGrid:

$("#transactionLogTable").jqGrid({
                url: '/et/transaction/getTransactions?dateValue=03%2F16%2F2011',
                datatype: "json",
                loadError: function(xhr,status,error){alert(status+" "+error);},
                colNames:['Transaction ID', 'User ID', 'Subcat ID', 'Subcat Name',
                          'Account ID', 'Account Name', 'Date', 'Amount', 'Notes'],

                colModel:[
                    {name: 'transactionId', index: 'transactionId', width: 100},
                    {name: 'userid', index: 'userId', width: 100},
                    {name: 'subCatId', index: 'subCatId', width: 100},
                    {name: 'subCatName', index: 'subCatName', width: 100},
                    {name: 'accountId', index: 'accountId', width: 100},
                    {name: 'accountName', index: 'accountName', width: 100},
                    {name: 'transactionDate', index: 'transactionDate', width: 100},
                    {name: 'amount', index: 'amount', width: 100},
                    {name: 'remarks', index: 'remarks', width: 100}
                ],
                pager: "#pager",
                rowNum: 10,
                rowList: [10,20,30],
                sortname: 'userId',
                sortorder: 'asc',
                viewrecords: true,
                caption: 'Transactions'
            });

Сервер был успешно поражен QueryString как:

dateValue=03%2F16%2F2011&_search=false&nd=1300532086871&rows=10&page=1&sidx=userId&sord=asc

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

Полагаю, это связано с отображением, но я перепробовал столько комбинаций, сколько смог.

Включенные файлы и версии:

<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery-ui-1.8.10.start/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/form-2.52.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/validate-1.7.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/i18n/grid.locale-en.js" charset="utf-8"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery.jqGrid.min.js"></script>

Ценю вашу помощь.

Фирдоус Амир

Answer 1

Ваша главная ошибка в том, что данные неверно отформатированы. Вы должны использовать

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": ["1", "1", "6", "0", "Credit Card", "Movie Hall Pass",
                     "250.0", "2011-03-16", "Entertainment" ]
        },
        ...
    ]
}

вместо

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": {
                "accountId": 1,
                "userId": 1,
                "transactionId": 6,
                "subCatId": 0,
                "accountName": "Credit Card",
                "remarks": "Movie Hall Pass",
                "amount": 250.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Entertainment"
            }
        },
        ...
    ]
}

В общем случае jqGrid достаточно гибок, чтобы читать практически любые данные JSON. Вы можете просто определить параметр jsonReader jqGrid и иногда дополнительно jsonmap свойство в определении столбца. Например, в вашем случае вы можете прочитать ваши данные с помощью следующего определения jqGrid

$("#transactionLogTable").jqGrid({
    // ... other parameters
    cmTemplate: {width: 100},
    colModel:[
        {name:'transactionId',   jsonmap: 'cell.transactionId'},
        {name:'userId',          jsonmap: 'cell.userId'},
        {name:'subCatId',        jsonmap: 'cell.subCatId'},
        {name:'subCatName',      jsonmap: 'cell.subCatName'},
        {name:'accountId',       jsonmap: 'cell.accountId'},
        {name:'accountName',     jsonmap: 'cell.accountName'},
        {name:'transactionDate', jsonmap: 'cell.transactionDate'},
        {name:'amount',          jsonmap: 'cell.amount'},
        {name:'remarks',         jsonmap: 'cell.remarks'}
    ],
    height: "auto",
    jsonReader: { repeatitems: false }
});

Здесь я использовал jsonReader: { repeatitems: false }, чтобы определить, что данные JSON для строки находятся не в массиве, а в объекте с именованным свойством. Свойство наподобие jsonmap: "cell.userId" необходимо, чтобы указать, что значение для соответствующего столбца сетки не должно быть свойством userId по умолчанию для объекта строки, но дополнительно является дочерним для свойства "cell". Кстати, вы используете 'userid' в качестве имени столбца и 'userId' в данных JSON. Лучше использовать те же имена, что и данные JSON. Если вы используете то же свойство index, что и name, вы можете исключить index. В случае, если значение свойства name будет использовано как index.

Поскольку вы использовали свойство "width: 100" для всех столбцов вашей сетки, я использовал параметр cmTemplate: {width: 100}, чтобы сделать определение colModel короче и лучше читать.

Вы можете увидеть модифицированную сетку здесь .

Я рекомендую дополнительно публиковать дату всегда в форме ISO YYYY-mm-dd и использовать formatter: 'date' и datefmt свойства colModel (например, formatter:'date', formatoptions:{newformat:'d-m-Y'}, datefmt: 'd-m-Y')