How can I hide the jqgrid completely when no data

问题:

I'm having a heck of a time trying to only display my jqGrid when records are returned from my webservice. I don't want it to be collapsed to where you only see the caption bar either, but if that's the best I can do, I suppose that I could put a meaningful message into the caption. Still, I'd much rather just hide the grid and show a "No Records Found" message div block.

I also guess that if worst came to worst, I could do the solution on this question How to display information in jqGrid that there are not any data? (link included as alternate possible solution for others).

I've tried doing a .hide() inside of both the function used when loading the data from a function and the GRIDCOMPLETE event, and neither accomplished hiding the grid. I'm pretty new to JQuery, not to mention pretty new to using 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> 

And tried this too:

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

Thanks for any help you can provide.

回答1:

jqGrid wraps your table with it's special sauce and divs so you should be able to do what you want by wrapping that table with your own div that you can hide:

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

Then in your gridComplete:

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

Hope this helps.

回答2:

just a little twist on seth's solution:

1. you can use in place of var recs = $('#list').jqGrid('getGridParam','records');

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

   jqGrid grid option 'records' default value = 'None'

   jqGrid grid option 'reccount' defaults to 0 and will always return a number even when there are no records (returns 0)

   see wiki:options @ jqGrid Wiki

2. If you don't want to use a wrapping div you can hide the whole jqGrid using $('.ui-jqgrid').hide() or $('.ui-jqgrid').show().

   The ui-jqgrid class is only used for the jqGrid parent.

回答3:

I'm finding that this:

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

is returning a "NaN." The "records" property is set to null if there are no records in the grid. So you can't cast it to a number and check to see if it equals zero.

回答4:

<!-- 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();
    }
}

回答5:

Try using this method to hide jqGrid:

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

Be sure to include:
jquery.jqGrid-x.x.x/src/grid.custom.js file.

See this post that talks more about the above method. Or jqGrid wiki where it talks about this method in the Add on Grid Methods section.

Another point to consider:
Avoid using wrapper (see post) <div> tags on jqGrid to hide it because it's overflow: auto; attribute will not work if you try to make grid columns manually wider and exceed wrapper div's width.
Another words, jqGrid is already equipped with logic to create horizontal scrollbar without help of external divs.

Note: Tested on IE8 & 9

回答6:

Suppose you have below tag in which you will be creating jqgrid:

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

Now in your js script in jqgrid code you can modify loadcomplete option as:

loadComplete: function () {

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

Defination of noDataError will as:

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

回答7:

It is enough to not include the "caption" option in the definition of the grid. Tested with version 5.0.1

回答8:

Folks, no need to create divs or use CSS. It is natively available using setGridState:

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

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