web-dev-qa-db-fra.com

Comment puis-je cacher complètement le jqgrid lorsqu'aucune donnée n'est renvoyée?

Je passe énormément de temps à essayer d’afficher mon jqGrid uniquement lorsque des enregistrements sont renvoyés à partir de mon service Web. Je ne veux pas que ce soit réduit à l'endroit où vous ne voyez que la barre de légende, mais si c'est ce que je peux faire de mieux, je suppose que je pourrais ajouter un message significatif dans la légende. Néanmoins, je préférerais de beaucoup cacher la grille et afficher un bloc div de message "Aucun résultat trouvé".

Je suppose aussi que si le pire arrivait au pire, je pourrais faire la solution à cette question Comment afficher des informations dans jqGrid s'il n'y a pas de données? (lien inclus comme solution alternative possible pour les autres).

J'ai essayé de faire un .hide () à la fois dans la fonction utilisée lors du chargement des données d'une fonction et dans l'événement GRIDCOMPLETE, et je n'ai pas réussi à cacher la grille. JQuery est relativement nouveau, sans parler de jqGrid.

$(document).ready(function() {
    $("#list").jqGrid({
        url: 'Service/JQGridTest.asmx/AssetSearchXml',
        datatype: 'xml',
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid',
        gridComplete: function() {
            var recs = $("#list").getGridParam("records");
            if (recs == 0) {
                $("#list").hide();
            }
            else {
                alert('records > 0');
            }
        }
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div>

Et essayé ceci aussi:

$(document).ready(function() {
    $("#list").jqGrid({
        datatype: function(postdata) {
            jQuery.ajax({
                url: 'Service/JQGridTest.asmx/AssetSearchXml',
                data: postdata,
                dataType: "xml",
                complete: function(xmldata, stat) {
                    if (stat == "success") {
                        var thegrid = $("#list")[0];
                        thegrid.addXmlData(xmldata.responseXML);
                        var recs = $("#list").getGridParam("records");

                        if (recs == 0) {
                            $("#list").hide();
                            alert('No rows - grid hidden');
                        }
                        else {
                            alert(recs);
                        }
                    }
                    else {
                        alert('FAIL');
                    }
                }
            });
        },
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid'
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div>

Merci pour toute l'aide que vous pouvez apporter.

javascriptjquerypluginsjqgrid
23
Billyhole

jqGrid enveloppe votre table de sa sauce spéciale et de vos divs afin que vous puissiez faire ce que vous voulez en enveloppant cette table avec votre propre div que vous pouvez masquer:

 <div id="gridWrapper">
    <table id="list" class="scroll"></table> 
 </div>

Puis dans votre grilleComplete:

   gridComplete: function() {
        var recs = parseInt($("#list").getGridParam("records"),10);
        if (isNaN(recs) || recs == 0) {
            $("#gridWrapper").hide();
        }
        else {
            $('#gridWrapper').show();
            alert('records > 0');
        }
    }

J'espère que cela t'aides.

36
seth

juste une petite torsion sur seth's solution:

  1. vous pouvez utiliser à la place de var recs = $ ('# list'). jqGrid ('getGridParam', 'records');

    var recs = $('#list').jqGrid('getGridParam','reccount');

    option de grille jqGrid 'enregistrements' valeur par défaut = 'Aucune'

    l'option de grille jqGrid ' reccount ' est définie par défaut sur 0 et renvoie toujours un nombre, même en l'absence d'enregistrements (renvoie 0).

    voir wiki: options @ jqGrid Wiki

  2. Si vous ne souhaitez pas utiliser une div d'habillage, vous pouvez masquer l'intégralité de jqGrid à l'aide de $('.ui-jqgrid').hide() ou $('.ui-jqgrid').show().

    La classe ui-jqgrid est uniquement utilisée pour le parent jqGrid.

6
woodchucky

Je constate que ceci:

parseInt($("#grid").getGridParam("records"),10);

retourne un "NaN." La propriété "records" est définie sur null s'il n'y a pas d'enregistrements dans la grille. Donc, vous ne pouvez pas le convertir en nombre et vérifier s'il est égal à zéro.

5
Max
<!-- table for Pagination START -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <div id="pager" class="scroll" style="text-align: right;" />
        </td>
    </tr>
</table> 
<!-- table for Pagination END -->
<table id="tblCompany" class="scroll" width="100%" cellpadding="0" cellspacing="0">
</table>
<div id="NoRecord" class="NoRecord">
    <%: CommonText.NoRecords %>
</div>

JqGrid Pas de vérification des dossiers

gridComplete: function () {
    var recs = $("#").getGridParam("records");
    if (recs == 0 || recs == null) {
        $(tableContacts).setGridHeight(100);
        $("#NoRecordContact").show();
    }
}
1
Trilok Giri

Essayez d’utiliser cette méthode pour masquer jqGrid:

$("#someGridTableName").jqGrid("GridUnload");

Assurez-vous d'inclure: 
jquery.jqGrid-x.x.x/src/grid.custom.js.

Voir ce post qui parle plus de la méthode ci-dessus. Ou jqGrid wiki où il est fait mention de cette méthode dans la section Add on Grid Methods.

Un autre point à considérer:
Évitez d’utiliser les balises wrapper (voir post ) <div> sur jqGrid pour le masquer car son attribut overflow: auto; ne fonctionnera pas si vous essayez d’élargir manuellement les colonnes de la grille et d’excéder la largeur de div. 
Un autre mot, jqGrid est déjà doté d’une logique permettant de créer une barre de défilement horizontale sans l’aide de div externes. 

Note: Testé sur IE8 et 9

1
Roman M

Supposons que vous ayez la balise ci-dessous dans laquelle vous allez créer jqgrid:

<div id=jqgridcontent>
<table id="jqgridtab"></table>
</div>

Maintenant, dans votre script js en code jqgrid, vous pouvez modifier l'option loadcomplete comme suit:

loadComplete: function () {

if(jQuery("#jqgridtab").getDataIDs().length==0){
            noDataError();
        }
    }

La définition de noDataError sera comme:

function noDataError(){
       document.getElementById("jqgridcontent").style.visibility="hidden";
       document.getElementById("jqgridcontent").style.display="none"; 
}
0
Ankit Adlakha

Les gens, pas besoin de créer des divs ou d'utiliser CSS. Il est disponible nativement avec setGridState :

gridComplete: function ()
  {
    var recs = $('#myGrid').jqGrid('getGridParam', 'reccount');

    if (isNaN(recs) || recs == 0)
    {
      $("#myGrid").jqGrid('setGridState', 'hidden');
    }
    else
    {
      $("#myGrid").jqGrid('setGridState', 'visible');
    }
  }
0
Robert Smith

Il suffit de ne pas inclure l'option "caption" dans la définition de la grille. Testé avec la version 5.0.1

0
user7082304