没有数据返回时，如何完全隐藏 jqgrid? [英] How can I hide the jqgrid completely when no data returned?

问题描述

当我的 web 服务返回记录时，我试图只显示我的 jqGrid 实在是太费劲了.我也不希望它被折叠到你只能看到标题栏的地方，但如果这是我能做的最好的，我想我可以在标题中加入有意义的信息.尽管如此，我还是宁愿隐藏网格并显示未找到记录"消息 div 块.

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.

我也猜想，如果最坏的情况发生了，我可以解决这个问题 如何在 jqGrid 中显示没有任何数据的信息?(作为其他可能的替代解决方案提供的链接).

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).

我尝试在从函数加载数据时使用的函数和 GRIDCOMPLETE 事件中执行 .hide()，但都没有完成隐藏网格.我对 JQuery 很陌生，更不用说使用 jqGrid 了.

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> 

也试过这个:

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

推荐答案

jqGrid 用它的特殊酱汁和 div 包裹你的桌子，所以你应该能够通过用你自己可以隐藏的 div 包裹桌子来做你想做的事情:

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>

然后在你的 gridComplete 中:

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

希望这会有所帮助.

这篇关于没有数据返回时，如何完全隐藏 jqgrid?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！