Question

I am trying to display an ajax data on the jqGrid, although it generates empty rows, no data is displayed.Any help on this would be appreciated. Click to view copy of my jqGrid - Here is my code:

HTML:

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

JQuery Code:

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"
    });

I even tried the following, but no progress on this one as well:

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

The problem is that your colModel is not defined as jqGrid expects it.

Col Model Options

As a solution to your problem I added a colmodel variable to hold the correct colmodel definitions and set the colModel grid option to that variable.

Here is a JsFiddle link to the solution.

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]);
 }

You can also do and not have the addRowData for loop.

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

Thank you! That idea worked for me. I just had to parse my data accordingly into the colModel like this:

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]);
 }

jqGrid generating rows but not displaying any data

2 个答案: