jqgrid : json 호출로 빈 격자

Question

jquery + jqgrid + php + json이있는 빈 그리드가 있습니다. 여기

{"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>"]}]} 

그리고 :

내 grid.local-XX는

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

은 JSON 응답입니다있는 jqGrid lib 디렉토리 앞에있는 내 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"); 
       } 
      } 
     } 
    ); 
}); 

레이아웃이 생성되고, 세 개의 버튼이 추가됩니다 ...하지만 그리드는 비어 있습니다.

누구든지 나를 도와 줄 수 있습니까?

Answer 1

내가 게시 한 JSON 데이터를 코드에서 읽을 수 있으므로 여기에 게시하지 않은 코드의 다른 부분을 살펴 보는 것이 좋습니다. the demo을 참조하십시오. "page":null,"total":0 대신 대신 JSON 데이터에 <div id="liste"> (존재하지 않는 경우) 태그를 닫고 다른 변경 사항을 사용하는 것과 같은 몇 가지 변경 사항이 권장됩니다. 그러나 이것이 주된 문제라고 생각하지 않습니다.

일반적인 이유 중 하나는 application/json이어야하는 HTTP 응답의 "Content-Type"헤더 값일 수 있습니다. 어떤 식 으로든 loadError 콜백/이벤트를 jqGrid에 포함하도록 권장합니다. 자세한 내용은 the answer을 참조하십시오.