如果没有数据返回，我怎样才能完全隐藏jqgrid？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果没有数据返回，我怎样才能完全隐藏jqgrid？相关的知识，希望对你有一定的参考价值。

当我从我的webservice返回记录时，我有一段时间试图只显示我的jqGrid。我不希望它被折叠到你只看到标题栏的地方，但如果这是我能做的最好的，我想我可以在标题中加入一条有意义的信息。不过，我更愿意隐藏网格并显示“找不到记录”消息div块。

我还猜测，如果最坏的情况发生，我可以在这个问题How to display information in jqGrid that there are not any data?上做解决方案（链接包括作为其他人的替代可能的解决方案）。

我已经尝试在从函数和GRIDCOMPLETE事件加载数据时使用的函数内部执行.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>

感谢您的任何帮助，您可以提供。

答案

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');
        }
    }

希望这可以帮助。

另一答案

只需为jqgrid元素设置不透明度：0。它也会起作用。

另一答案

只是在seth's解决方案上有点扭曲：

  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父级。
另一答案

我发现了这个：

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

正在回归“NaN”。如果网格中没有记录，则“records”属性设置为null。因此，您无法将其强制转换为数字，并检查它是否等于零。

另一答案
<!-- 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();
    }
}
另一答案

尝试使用此方法隐藏jqGrid：

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

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

请参阅此post，其中详细介绍了上述方法。或者jqGrid wiki在Add on Grid Methods部分讨论这个方法。

另一点需要考虑： 避免使用包装（参见post） jqGrid上的标签可以隐藏它，因为它是 如果您尝试手动使网格列更宽并超过包装器div的宽度，则overflow: auto;属性将不起作用。 换句话说，jqGrid已经配备了逻辑来创建水平滚动条而无需外部div。

注意：在IE8和9上测试过

另一答案

假设您有以下标记，您将在其中创建jqgrid：

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

现在在jqgrid代码的js脚本中，您可以将loadcomplete选项修改为：

loadComplete: function () {

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

无数据错误的定义如下：

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

在网格定义中不包括“标题”选项就足够了。使用5.0.1版测试

另一答案

伙计们，不需要创建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');
    }
  }
另一答案
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();

                                }
                            }

                        });

以上是关于如果没有数据返回，我怎样才能完全隐藏jqgrid？的主要内容，如果未能解决你的问题，请参考以下文章

使用 jqgrid 上的 footerdata 获取总和

如何使用<SELECT> editoptions一列时，得到选择在jqGrid的价值

jqgrid之外的自定义分页

jqgrid 怎么获取返回的数据

jqgrid 最近在用jqgrid,我想要实现列的拖拽功能，请问有人实现过吗

jqgrid 控制 详细页面 显示的 列