JQGrid数据未显示

Question

我的jqrid有这个代码。但是数据没有显示在网格中。生成网格，但网格中没有显示数据。我也应用了错误控制，但这没有给我任何错误。代码如下：

$(document).ready(function () {
'use strict';
var expHeadVal = "12345:Party;12346:Miscellaneous;12347:Conveyance;12348:Staff Welfare";
var webForm = document.forms[0];
var i = 0;
var mydata = "";
var jsonData = { 
    "records": "4",
    "userData":{

    },
    "rows":[
    {"id":"1", "sdate":"2013-03-22","expHead":"Party","expAmt":"1000","expReason":"Yes","expRemark":"FedEx"},
    {"id":"2", "sdate":"2013-03-21","expHead":"Conveyance","expAmt":"200","expReason":"Yes","expRemark":"FedEx"},
    {"id":"3", "sdate":"2013-03-20","expHead":"Conveyance","expAmt":"165","expReason":"Yes","expRemark":"FedEx"},
    {"id":"4", "sdate":"2013-03-11","expHead":"Staff Welfare","expAmt":"1653","expReason":"Yes","expRemark":"FeEx"}
    ]
}
//  alert (jsonData.rows[3].id);
var $grid = $("#View1"),
    initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
                    // remove % from the searching toolbar
            elem.style.width = '';
        }
                // to be able to use 'showOn' option of datepicker in advance searching dialog
                // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,
                showWeek: true,
                showButtonPanel: true,
                onClose: function (dateText, inst) {
                    inst.input.focus();
                }
            });
            $(elem).next('button.ui-datepicker-trigger').button({
                text: false,
                icons: {primary: 'ui-icon-calculator'}
            }).find('span.ui-button-text').css('padding', '0.1em');
        }, 100);
    },
    numberTemplate = {
        formatter: 'number',
        align: 'right',
        sorttype: 'number',
        editable: true,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }},
    dateTemplate = {
        align: 'center',
        sorttype: 'date',
        editable: true,
        formatter: 'date',
        formatoptions: { newformat: 'd-M-Y' },
        datefmt: 'd-M-Y',
        editoptions: { dataInit: initDateWithButton, size: 11 },
        searchoptions: {
            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
            dataInit: initDateWithButton,
            size: 11,          // for the advanced searching dialog
            attr: {size: 11}   // for the searching toolbar
        }
    },
    lastSel;

$grid.jqGrid({
    datatype: "local",
    data: jsonData,
    jsonReader : {      
//          userdata: "userData",
        root: "rows",
        repeatitems: false,
//          id: "1",
        records: "records"
    },
//      data: jsonData,
    colNames: ['Date','Expense Head','Amount', 'Reason','Remarks'],
    colModel: [
//      {name:'id', index:'id', width:15, editable:false, key: true, hidden: true},
        {name:'sdate', index:'sdate', width:200, template: dateTemplate },
        {name:'expHead', index:'expHead', width:150, editable:true, sorttype:'number',sortable:true, edittype:"select", editoptions:{value:expHeadVal}},
        {name:'expAmt', index:'expAmt', width:100, editable:true, template: numberTemplate, summaryType:'sum' },
        {name:'expReason', index:'expReason', width:200, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}},
        {name:'expRemark', index:'expRemark', width:200,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}}],
    loadtext: "Loading...",
    sortname: ['Col0','Col1'],
    pager: '#pView1',
    caption: "Expense Table",
    gridview: true,
    rownumbers: true,
    autoencode: true,
    ignoreCase: true,
    viewrecords: true,
    sortorder: 'desc',
    height: '100%',
    editurl: 'clientArray',
    beforeSelectRow: function (rowid) {
        if (rowid !== lastSel) {
            $(this).jqGrid('restoreRow', lastSel);
            lastSel = rowid;
        }
        return true;
    },
    ondblClickRow: function (rowid, iRow, iCol, e) {
        var p = this.p, $this = $(this);
           // if the row are still non-selected
        if ((p.multiselect && $.inArray(rowid, p.selarrrow) < 0) || rowid !== p.selrow)
            { $this.jqGrid("setSelection", rowid, true); }
        $this.jqGrid('editRow', rowid, true, function () {
            if (e.target.disabled)
                { e.target.disabled = false; }
             $("input, select", e.target).focus();
        });
        return;
    },
    loadComplete: function () {
    alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
    alert('HTTP status code: ' + jqXHR.status + '\n' +
          'textStatus: ' + textStatus + '\n' +
          'errorThrown: ' + errorThrown);
    alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
}
});

$grid.jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
$grid.jqGrid('navGrid', '#pView1', {refreshstate: 'current', edit: false, add: false, del: false});
$grid.jqGrid('inlineNav',"#pView1");
});

有谁可以告诉我这里缺少什么？

提前感谢您的帮助。

悉达多

Answer 1

您应该将data: jsonData更改为data: jsonData.rows，因为您使用datatype: "local"。

顺便提一句jsonReader选项不会用于datatype: "local"。 jsonData.rows中的数据格式已经与datatype: "local"的输入数据的默认格式相对应。如果您需要使用datatype: "local"填充其他数据格式的jqGrid，则应使用localReader选项而不是jsonReader（请参阅the documentation）。