javascript - mostrar - ¿Cómo puedo ocultar la jqgrid por completo cuando no se devuelven datos?

ocultar una div con javascript

Question

Me está costando mucho tiempo intentar mostrar solo mi jqGrid cuando los registros se devuelven desde mi servicio web. No quiero que se colapsen donde solo se ve la barra de título, pero si eso es lo mejor que puedo hacer, supongo que podría poner un mensaje significativo en el título. Aún así, preferiría simplemente ocultar la cuadrícula y mostrar un bloque Div mensaje "No se encontraron registros".

También creo que, en el peor de los casos, podría hacer la solución a esta pregunta ¿Cómo mostrar información en jqGrid de que no hay datos? (enlace incluido como solución alternativa posible para otros).

Intenté hacer un .hide () dentro de la función utilizada al cargar los datos de una función y el evento GRIDCOMPLETE, y ninguno de los dos ocultó la cuadrícula. Soy bastante nuevo en JQuery, por no mencionar que soy bastante nuevo en el uso 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> 

Y lo intenté también:

$(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> 

Gracias por cualquier ayuda que usted nos pueda proporcionar.

Answer 1

Es suficiente no incluir la opción "título" en la definición de la cuadrícula. Probado con la versión 5.0.1

Answer 2

Estoy descubriendo que esto:

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

está devolviendo un "NaN". La propiedad "registros" se establece en nulo si no hay registros en la cuadrícula. Entonces no puedes convertirlo a un número y verificar si es igual a cero.

Answer 3

Gente, no es necesario crear divs o usar CSS. Está disponible de forma nativa usando setGridState :

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

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

Answer 4

Intenta usar este método para ocultar jqGrid:

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

Asegúrese de incluir:
jquery.jqGrid-xxx / src / grid.custom.js file.

Vea esta post que habla más sobre el método anterior. O wiki de jqGrid donde se habla de este método en la sección Add on Grid Methods .

Otro punto a considerar:
Evite utilizar las etiquetas wrapper (ver post ) <div> en jqGrid para ocultarlo porque es un overflow: auto; El atributo no funcionará si intentas hacer que las columnas de la grilla se ensanchen manualmente y excedan el ancho de la envoltura div.
Otra palabras, jqGrid ya está equipado con lógica para crear barra de desplazamiento horizontal sin ayuda de divs externos.

Nota: Probado en IE8 y 9

Answer 5

Supongamos que tiene una etiqueta debajo en la que va a crear jqgrid:

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

Ahora en su script js en el código jqgrid puede modificar la opción loadcomplete como:

loadComplete: function () {

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

La definición de noDataError será como:

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

Answer 6

jqGrid envuelve tu mesa con su salsa y sus divisiones especiales para que puedas hacer lo que quieras envolviendo esa mesa con tu div que puedas ocultar:

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

Luego en tu gridComplete:

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

Espero que esto ayude.

Answer 7

solo un pequeño giro en solución :

1. puede usar en lugar de var recs = $ (''# list''). jqGrid (''getGridParam'', '' records '');

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

   La opción de cuadrícula jqGrid '' records '' valor por defecto = ''None''

   La opción de cuadrícula jqGrid '' reccount '' está predeterminada en 0 y siempre devolverá un número incluso cuando no haya registros (devuelve 0)

   ver wiki: opciones @ jqGrid Wiki

2. Si no desea utilizar un div de ajuste, puede ocultar todo el jqGrid utilizando $(''.ui-jqgrid'').hide() o $(''.ui-jqgrid'').show() .

   La clase ui-jqgrid solo se usa para el padre jqGrid.

Answer 8

<!-- 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 Sin registros

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