jqGrid는 행을 생성하지만 데이터를 표시하지 않습니다.

Question

jqGrid에 아약스 데이터를 표시하려고합니다. 빈 행을 생성하지만 아무런 데이터도 표시되지 않습니다.이 점에 대해 도움이 될 것입니다. - Click to view copy of my jqGrid 여기 내 코드입니다 :

HTML :

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

JQuery와 코드 :

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

: 나는 심지어 다음을 시도,하지만도이 일에 진전

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

Answer 1

고맙습니다! 저 아이디어는 저를 위해 작동했습니다. 나는 다음과 같이 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]); 
} 

Answer 2

문제는 jqGrid가 예상하므로 colModel이 정의되어 있지 않다는 것입니다. 문제에 대한 해결책으로

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