如何在沒有返回數據的情況下完全隱藏jqgrid？

Question

當我的網絡服務返回記錄時，我有一段時間試圖只顯示我的 jqGrid。 我也不希望它被折疊到你只能看到標題欄的地方，但如果這是我能做的最好的，我想我可以在標題中加入一個有意義的信息。 不過，我更願意隱藏網格並顯示“未找到記錄”消息 div 塊。

我也猜想如果最壞的情況發生，我可以解決這個問題How to display information in jqGrid that there are not any data? （包含鏈接作為其他人的替代可能解決方案）。

我嘗試在從 function 和 GRIDCOMPLETE 事件加載數據時使用的 function 和 GRIDCOMPLETE 事件中執行 a.hide()，但都沒有完成隱藏網格。 我是 JQuery 的新手，更不用說使用 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> 

也試過這個：

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

感謝您的任何幫助，您可以提供。

Answer 1

jqGrid用它的特殊醬汁和div包裹你的桌子所以你應該能夠做你想要的東西，用你自己的div包裝你可以隱藏的div：

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

然后在你的gridComplete中：

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

希望這可以幫助。

Answer 2

只是對seth解決方案的一點點改動 ：

1. 你可以使用var recs = $（'＃list'）。jqGrid（'getGridParam'，' records '）;

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

   jqGrid網格選項' records '默認值='無'

   jqGrid網格選項' reccount '默認為0，即使沒有記錄也會返回一個數字（返回0）

   請參閱wiki：options @ jqGrid Wiki

2. 如果你不想使用包裝div，你可以使用$('.ui-jqgrid').hide()或$('.ui-jqgrid').show()來隱藏整個jqGrid。

   ui-jqgrid類僅用於jqGrid父級。

Answer 3

我發現了這個：

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

正在回歸“NaN”。 如果網格中沒有記錄，則“records”屬性設置為null。 因此，您無法將其強制轉換為數字，並檢查它是否等於零。

Answer 4

嘗試使用此方法隱藏jqGrid：

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

一定要包括：
jquery.jqGrid-xxx / src / grid.custom.js文件。

請參閱此文章 ，其中詳細介紹了上述方法。 或者在jqGrid wiki中 ，它在Add on Grid Methods部分中討論了這個方法。

另一點需要考慮：
避免在jqGrid上使用包裝器（見post ）<div>標簽來隱藏它，因為它是overflow: auto; 如果您嘗試手動使網格列更寬並超過包裝div的寬度，則屬性將不起作用。
換句話說，jqGrid已經配備了邏輯來創建水平滾動條而無需外部div。

注意：在IE8和9上測試過

Answer 5

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

JqG​​rid沒有記錄檢查

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

Answer 6

假設您有以下標記，您將在其中創建jqgrid：

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

現在在jqgrid代碼的js腳本中，您可以將loadcomplete選項修改為：

loadComplete: function () {

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

noDataError的定義將如下：

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

Answer 7

在網格定義中不包括“標題”選項就足夠了。 使用5.0.1版測試

Answer 8

伙計們，不需要創建div或使用CSS。 它本身可以使用setGridState ：

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

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

Answer 9

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

                                }
                            }

                        });

Answer 10

只需為jqgrid元素設置不透明度：0。 它也會起作用。

Answer 11

Fixed the above issue .

Row has been created on jsgrid for row data..
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>

When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience . 

For solving this we can use hide and show the css element on modifying the CSS class

For Hiding : 
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();

For Showing : 
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();