jqGrid生成行但不顯示任何數據

Question

我試圖在jqGrid上顯示ajax數據，盡管它會生成空行，但沒有數據顯示。對此的任何幫助將不勝感激。 單擊以查看我的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所期望的。

列模型選項

為了解決您的問題，我添加了一個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"
});

Answer 2

謝謝！ 這個想法對我有用。 我只需要像這樣將我的數據相應地解析到colModel中：

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 c=[];

for(var i=0;i<he.length;i++){

  c.push('{"name":"'+he[i]+'","index":"'+he[i]+'"}');
}
var colmodel="["+c+"]"

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

  // c.push('{"name":"'+he[i]+'","index":"'+he[i]+'"'+'"formatter":'+formatTitle+'}');                  
jQuery("#list47").jqGrid({
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: jQuery.parseJSON(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]);
 }