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数据。见the demo。一些更改，例如在JSON数据中使用"page":1,"total":1而不是"page":null,"total":0，关闭<div id="liste">的标记（如果它不存在）以及其他一些更改将被推荐，但我不认为这是你的主要问题。

一个典型的可能原因可能是HTTP响应的“Content-Type”标头的值应为application/json。无论如何，我建议你在jqGrid中包含loadError回调/事件。有关详细信息，请参阅the answer。

jqgrid：用json调用空网格

1 个答案: