jqGrid - supply no data message in the grid?

问题

If there was no data returned from our search currently we use the loadComplete callback to print out a message to the user to indicate that there is no data. Is there a way to configure jqGrid to print out a "no data" message within the grid? Currently we print it out in a div above the grid but would like it to be within the actual grid.

回答1:

jqGrid displays "No records to view" message ($.jgrid.defaults.emptyrecords) only at the end of the pager area and only in the case if all following take place

you define a pager
viewrecords: true
the current number of record counts (reccount parameter) is 0.

It is unknown to me any "standard" way to display a message inside of grid data area (on top of the body of grid). It seems to me if you need such message you have to continue to use div placed over the grid body and hide/show it inside of loadComplete event handle.

回答2:

To Oleg: Yes you are right, since jqGrid shows the message only in the pager i.e. navGrid. So placing one <DIV> after the jqGrid table is the best way to show the message.

To Marcus: See the below approach of what I did in one of the project. I pasted the HTML snippet - and loadComplete implementation, where you have to trigger your logic to show the "No records to show" message.

HTML:

<pre>
  <div class="cols jsGridOuter" style="position:relative;">
    <table id="mandateList" class="jsStretchGridWidth"><tr><td></td></tr></table>
    <div class="noResultsDiv gridNoRecords jstHidden">
      <span class="notice"><label>No records to show</label></span>
    </div>
    <div id="pagination"></div>
  </div>
</pre>

Java Script:

loadComplete: function() {
  if (j$(this).getGridParam("records")==0) 
  {
    j$('div#pagination').hide();
    if (j$('div.noResultsDiv').hasClass('jstHidden'))
    {
      j$('div.noResultsDiv').removeClass('jstHidden');
    }
  }
  else
  {
    j$('div#pagination').show();
    if (j$('div.noResultsDiv').length>0)
    {
      j$('div.noResultsDiv').addClass('jstHidden');
    }
  }
}

回答3:

You can overwrite the body table html to show your message. Use this to do it:

loadComplete: function() {
                if ($('#Grid').getGridParam('records') === 0) {
                    oldGrid = $('#GridIdb2 tbody').html();
                    $('#Grid tbody').html("<div style='padding:6px;background:#D8D8D8'>No records found</div>");
                }
                else
                    oldGrid = "";
             }

Use the oldGrid var as an auxiliar to save what the jqgrid had before you changed; before submit a new search set the old value:

if(oldGrid!=""){
    $("#Grid tbody").html(oldGrid);
}

来源：https://stackoverflow.com/questions/3935645/jqgrid-supply-no-data-message-in-the-grid

标签

jquery

jqgrid