webentwicklung-frage-antwort-db.com.de

Wie kann ich das jqgrid vollständig ausblenden, wenn keine Daten zurückgegeben werden?

Ich habe einiges zu tun, wenn ich versuche, mein jqGrid nur dann anzuzeigen, wenn Datensätze von meinem Webservice zurückgegeben werden. Ich möchte nicht, dass es so reduziert wird, dass nur die Beschriftungsleiste angezeigt wird. Wenn dies jedoch das Beste ist, was ich tun kann, könnte ich der Beschriftung eine aussagekräftige Nachricht hinzufügen. Trotzdem möchte ich das Raster lieber ausblenden und einen Div-Block für Nachrichten "Keine Datensätze gefunden" anzeigen.

Ich vermute auch, dass ich im schlimmsten Fall die Lösung für diese Frage finden könnte Wie kann ich Informationen in jqGrid anzeigen, die keine Daten enthalten? (Link als alternative mögliche Lösung für andere enthalten).

Ich habe versucht, eine .hide () innerhalb sowohl der Funktion, die beim Laden der Daten aus einer Funktion verwendet wird, als auch des GRIDCOMPLETE-Ereignisses auszuführen, und weder das Ausblenden des Rasters abgeschlossen. Ich bin ziemlich neu in JQuery, ganz zu schweigen von der Verwendung von 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> 

Und versuchte dies auch:

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

Vielen Dank für jede Hilfe, die Sie zur Verfügung stellen können.

23
Billyhole

jqGrid umhüllt Ihren Tisch mit seiner speziellen Sauce und den divs, so dass Sie tun können, was Sie wollen, indem Sie den Tisch mit Ihrem eigenen div umschließen, das Sie ausblenden können:

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

Dann in Ihrem gridComplete:

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

Hoffe das hilft.

36
seth

nur eine kleine Drehung auf seth's Lösung:

  1. sie können anstelle von var recs = $ ('# list') verwenden. jqGrid ('getGridParam', 'records');

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

    jqGrid-Rasteroption 'Datensätze' Standardwert = 'Keine'

    die jqGrid-Rasteroption ' reccount ' ist standardmäßig 0 und gibt immer eine Zahl zurück, auch wenn keine Datensätze vorhanden sind (gibt 0 zurück)

    siehe wiki: options @ jqGrid Wiki

  2. Wenn Sie kein Wrapping-Div verwenden möchten, können Sie das gesamte jqGrid mit $('.ui-jqgrid').hide() oder $('.ui-jqgrid').show() ausblenden.

    Die ui-jqgrid-Klasse wird nur für das jqGrid-übergeordnete Element verwendet.

6
woodchucky

Ich finde das:

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

gibt ein "NaN" zurück. Die Eigenschaft "records" wird auf null gesetzt, wenn sich keine Datensätze im Raster befinden. Sie können es also nicht in eine Zahl umwandeln und prüfen, ob es gleich Null ist.

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 No Records Check

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

Verwenden Sie diese Methode, um jqGrid auszublenden:

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

Stellen Sie sicher, dass Sie Folgendes hinzufügen: 
Datei jquery.jqGrid-x.x.x/src/grid.custom.js.

Sehen Sie dieses post , das mehr über die oben genannte Methode spricht. Oder jqGrid-Wiki , wo im Abschnitt Add on Grid Methods von dieser Methode gesprochen wird.

Ein weiterer zu berücksichtigender Punkt:
Vermeiden Sie die Verwendung von Wrapper (siehe post ) <div> -Tags in jqGrid, um ihn auszublenden, da das overflow: auto;-Attribut nicht funktioniert, wenn Sie versuchen, Gitterspalten manuell breiter zu machen und die Breite des Wrappers zu überschreiten. 
Mit anderen Worten, jqGrid ist bereits mit einer Logik ausgestattet, mit der eine horizontale Bildlaufleiste ohne externe Divisionen erstellt werden kann. 

Hinweis: An IE8 & 9 getestet

1
Roman M

Angenommen, Sie haben unten ein Tag, in dem Sie jqgrid erstellen werden:

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

Jetzt können Sie in Ihrem js-Skript in jqgrid-Code die Option loadcomplete wie folgt ändern:

loadComplete: function () {

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

Die Definition von noDataError lautet wie folgt:

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

Legen Sie einfach die Deckkraft fest: 0 für das Element jqgrid. es wird auch funktionieren.

0

Leute, keine Notwendigkeit, Divs zu erstellen oder CSS zu verwenden. Es ist nativ mit setGridState verfügbar:

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
Try this (Keep JqGrid inside a div). Also create a label to display a meesage.
                        <label style="font-weight:bold;color:red;font-size:11px;" id="lblValMessage"></label>

  <div align="center" class='content' id="divForImageResult">
                                <div style="padding-left:50px;">
                                </div>
                                <table id="EmpTable"></table>
                                <div id="EmpPager">
                                </div>
                            </div>
And then write this after ajax call
   gridComplete: function () {
                                var recs = parseInt($("#EmpTable").getGridParam("records"), 10);
                                if (isNaN(recs) || recs == 0) {
                                    document.getElementById("lblValMessage").innerHTML = "No data found.";

                                    $("#divForImageResult").hide();

                                }
                                else {
                                    $('#divForImageResult').show();

                                }
                            }

                        });
0
MS Wani

Es reicht aus, die Option "caption" nicht in die Definition des Gitters aufzunehmen. Getestet mit Version 5.0.1

0
user7082304