jqgrid: пустая сетка с вызовом json

Question

У меня есть пустая сетка с jquery + jqgrid + php + json.

Мой grid.local-xx находится перед jqgrid lib

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:

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

А вот мой вызов JavaScript:

<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, которые вы опубликовали. Смотрите демо . Некоторые изменения, такие как использование "page":1,"total":1 вместо "page":null,"total":0 в данных JSON, закрывающий тег для <div id="liste"> (если он не существует) и некоторые другие изменения будут рекомендованы, но я не думаю, что это ваша основная проблема .

Одной из типичных возможных причин может быть значение заголовка «Content-Type» ответа HTTP, которое должно быть application/json. В любом случае, я бы порекомендовал вам включить loadError callback / event в jqGrid. См. ответ для получения более подробной информации.