JqG​​rid无法从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"
}

如何从the demo读取数据将在更改后读取。