JqGrid не может заполнить себя из ответа Json

Question

Итак, у меня есть функция JavaScript, которая запускается при загрузке страницы, перечисленная ниже:

function createGrid()
        {
            var myGrid = 
                jQuery("#responseMessages"),
                reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />",
                getColumnIndexByName = function(grid,columnName) {
                    var cm = grid.jqGrid('getGridParam','colModel');
                    for (var i=0,l=cm.length; i<l; i++) {
                        if (cm[i].name===columnName) {
                            return i; // return the index
                        }
                    }
                    return -1;
            };

            myGrid.jqGrid({
                url: "<%= Url.Action("GetMessages", "Home") %>",
                datatype: 'json',
                myType: 'GET',
                height: 'auto',
                colModel: [
                    { name:'distance', index:'distance', label:'Distance', width:100 },
                    { name:'age', index:'age', label:'Age', width:75 },
                    { name:'message', index:'message', label:'Message', width:500 },
                    { name:'messageId', index:'messageId', key:true, hidden:true },
                    { name:'report', index:'report', label: 'Report', width:100,
                        formatter:function() { return reportBtn; } }
                ],
                loadComplete: function() {
                    var i=getColumnIndexByName(myGrid,'report');
                    // nth-child need 1-based index so we use (i+1) below
                    $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) {
                        var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow");
                        var x=window.confirm("Are you sure you want to report this message?")
                        if (x)
                        {
                            reportMessage(tr[0].id);
                        }
                        e.preventDefault();
                    });
                },
                rowNum:25,
                viewrecords:true, 
                rowList:[10,25,50],
                pager: '#pager',
                caption: "What's going on in your area!"
            });
        }

Теперь он прекрасно загружает сетку, на самом деле правильно обращается к public ActionResult GetMessages() на сервере и не получает никаких данных из ответа, поэтому он не заполняет сетку и говорит, что нет записей. Ура!

Проблема в том, что я нажимаю кнопку на странице, которая вызывает этот метод javascript:

function reloadGrid()
        {
            $("#responseMessages").trigger("reloadGrid");
        }

Таким образом, сетка переходит и повторно получает метод сервера, уууу! Но на этот раз сервер отправляет ответ обратно, похожий на этот, от firebug:

{"ContentEncoding":null,"ContentType":null,"Data":{"page":1,"records":2,"rows":[{"id":3,"cell":["\u003c 1 mile","25 hour(s)","sdfgsdfgsdfg","3"]},{"id":2,"cell":["\u003c 1 mile","25 hour(s)","adfg","2"]}],"total":1},"JsonRequestBehavior":1}

Однако сетка не заполняется и все еще говорит, что нет записей, когда должно быть 3.

Answer 1

Вы используете нестандартный формат данных JSON, поэтому вы должны включить в jqGrid соответствующий параметр jsonReader , который описывает, как jqGrid должен получать данные из входных данных JSON:

jsonReader: {
    page: "Data.page",
    total: "Data.total",
    records: "Data.records",
    root: "Data.rows"
}

Как вы можете прочитать из демо данные будут прочитаны после изменения.