jqgrid：json呼び出しの空のグリッド

Question

空のグリッドにjquery + jqgrid + php + jsonがあります。

ここ

script type="text/javascript" src="/v2/back/js/jquery.min.js

script type="text/javascript" src="/v2/back/js/jqgrid/grid.locale-fr.js

script type="text/javascript" src="/v2/back/js/jqgrid/jquery.jqGrid.min.js

libにjqgridはJSONレスポンスである前に私のgrid.local-xxは次のとおりです。

{"page":null,"total":0,"records":7,"rows":[{"id":"1","cell":["","GRATUIT",null,null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/1\" >setOptions<\/a>"]},{"id":"2","cell":["","PACK 1","30",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/2\" >setOptions<\/a>"]},{"id":"3","cell":["","PACK 2","50",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/3\" >setOptions<\/a>"]},{"id":"4","cell":["","PACK 3","70",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/4\" >setOptions<\/a>"]},{"id":"5","cell":["","PACK 4","90",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/5\" >setOptions<\/a>"]},{"id":"6","cell":["","PACK 5","150",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/6\" >setOptions<\/a>"]},{"id":"8","cell":["","Pack 6","1",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/8\" >setOptions<\/a>"]}]} 

そしてここにはあります私のjav ascriptコール：

<div id="liste"> 
<div id="messagebox"></div> 
<div id="filter"></div> 
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#list").jqGrid({ 
     url:'/admin/pack/showgrid/', 
     datatype: 'json', 
     mtype: 'POST', 
     colNames:['','Libellé', 'Montant','Montant Promo','Du','Au','Etat','Option'], 
     colModel:[ 
      {name:'edition',index:'edition', sortable:false,editable: false,width:10, align:"center"}, 
      {name:'pack_libelle',index:'pack_libelle', sortable:true, editable: true,width:120, align:"center"}, 
      {name:'pack_montantHT',index:'pack_montantHT', sortable:true, editable: true,width:120, align:"center"}, 
      {name:'pack_montantPromoHT',index:'pack_montantPromoHT', sortable:true, editable: true,width:140, align:"center"}, 
      {name:'pack_dateDebutPromotion',index:'pack_dateDebutPromotion', sortable:true, editable: true,width:160, align:"center"}, 
      {name:'pack_dateFinPromotion',index:'pack_dateFinPromotion', sortable:true, editable: true,width:160, align:"center"}, 
      {name:'pack_isActif',index:'pack_isActif', editable: true,width:120, align:"center",edittype:'select',editoptions:{value:"1:Actif;0:Inactif"}}, 
      {name:'pack_option',index:'pack_option', editable: false,width:120, align:"center"} 
     ], 
     pager: '#pager', 
     rowNum:10, 
     rowList:[10,20,30], 
     sortname: 'pack_isActif', 
     viewrecords: true, 
     autowidth: true, 
     rownumbers: false, 
     gridview : true, 
     sortorder: "desc", 
     caption:"Liste des packs activés ou désactivés" 
     }); 
     jQuery("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:false}); 

    jQuery("#list").jqGrid('navButtonAdd',"#pager", 
     {caption:"Add", title:"Ajouter un nouveau pack", buttonicon:'ui-icon-plus', 
      onClickButton:function(){ 
       jQuery("#list").editGridRow("new", { 
        url:'/v2/admin/pack/insert', 
        top:250, 
        left:500, 
        height:280, 
        width:500, 
        closeAfterAdd:true, 
        reloadAfterAdd:true       
       }); 
      } 
     } 
    );  

    jQuery("#list").jqGrid('navButtonAdd',"#pager", 
     {caption:"Modif.",title:"Modifier un enregistrement",buttonicon:'ui-icon-pencil', 
      onClickButton:function(){ 
       var gr = jQuery("#list").jqGrid('getGridParam','selrow'); 
       if(gr != null){ 
        jQuery("#list").jqGrid('editGridRow',gr,{ 
         height:280, 
         width:500, 
         reloadAfterSubmit:true, 
         url:'/v2/admin/pack/edit', 
         top:250, 
         left:500, 
         closeAfterEdit:true, 
         processData: "Chargement..." 
        }); 
       }else{ 
        alert("Choisir un enrégistrement s'il vous plaît. \r\nMerci"); 
       } 
      } 
     } 
    ); 

    jQuery("#list").jqGrid('navButtonAdd',"#pager", 
     {caption:"Suppr.",title:"Supprimer un enregistrement",buttonicon:'ui-icon-trash', 
      onClickButton:function(){ 
       var gr = jQuery("#list").jqGrid('getGridParam','selrow'); 
       if(gr != null){ 
        jQuery("#list").delGridRow(gr, { 
          caption: "Suppression", 
          top:250, 
          left:500, 
          msg: "Vous êtes sûr ?", 
          url:'/admin/pack/delete/', 
          processData: "Chargement..." 
        }); 
       }else{ 
        alert("Choisir un enrégistrement s'il vous plaît. \r\nMerci"); 
       } 
      } 
     } 
    ); 
}); 

レイアウトが生成されるが、3つのボタンが追加されている...しかし、グリッドは空です。

誰でも手伝ってもらえますか？

Answer 1

投稿したJSONデータをコードで読み取ることができるので、ここに投稿しなかったコードの別の部分を見ることをおすすめします。 the demoを参照してください。 "page":null,"total":0の代わりにのようないくつかの変更は、JSONデータの<div id="liste">（存在しない場合）とその他の変更を閉じるタグを閉じることをお勧めしますが、あなたの主な問題ではないと思います。

HTTP応答の "Content-Type"ヘッダーの値は、一般的な考えられる理由の1つで、application/jsonである必要があります。いずれにしても、loadErrorコールバック/イベントをjqGridに含めることをお勧めします。詳細はthe answerを参照してください。