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

Question

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

我也猜测,如果最坏的情况发生,我可以在这个问题上做解决方案如何在jqGrid中显示没有任何数据的信息？(链接包括作为其他人的替代可能解决方案).

我已经尝试在从函数和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> 

感谢您的任何帮助,您可以提供.

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()或隐藏整个jqGrid $('.ui-jqgrid').show().

   ui-jqgrid类仅用于jqGrid父级.

Answer 3

我发现了这个:

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

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