javascript - jqGrid 生成行但不显示任何数据

Question

我试图在 jqGrid 上显示 ajax 数据，虽然它生成空行，但没有显示任何数据。对此的任何帮助将不胜感激。 Click to view copy of my jqGrid -这是我的代码:

HTML:

<table id="list47"></table>
<div id="plist47"></div>

JQuery 代码:

var mydata=[{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }]

var headerData=["id","Name","PackageCode"];

//As header data is taken from another API I would need it in a separate array like the above.

    jQuery("#list47").jqGrid({
        data: mydata,
        datatype: "local",
        height: 150,
        rowNum: 10,
        colNames: headerData,
        colModel: headerData,
        rowList: [10,20,30],
        pager: "#plist47",
        viewrecords: true,
        caption: "json Data grid"
    });

我什至尝试了以下方法，但在这方面也没有任何进展:

var md=[{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }]

var he=["id","Name","PackageCode"];

jQuery("#list47").jqGrid({
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: he,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
});
for(var i=0;i<md.length;i++){
 jQuery("#list47").addRowData(i+1,md[i]);
 }

Answer 1

问题是你的 colModel 没有像 jqGrid 期望的那样定义。

Col Model Options

作为问题的解决方案，我添加了一个 colmodel 变量来保存正确的 colmodel 定义并将 colModel 网格选项设置为该变量。

这是一个JsFiddle链接到解决方案。

var md=[{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }]

var he=["id","Name","PackageCode"];

var colmodel= [{name:'id', index:'id', width:55},
              {name:'Name', index:'Name' },
                {name:'PackageCode', index:'PackageCode'}]


jQuery("#list47").jqGrid({
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: colmodel,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
});
for(var i=0;i<md.length;i++){
 jQuery("#list47").addRowData(i+1,md[i]);
 }

您也可以执行或不执行 addRowData for 循环。

jQuery("#list47").jqGrid({
    data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: colmodel,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
});