web-dev-qa-db-ja.com

データが返されないときに、jqgridを完全に非表示にするにはどうすればよいですか？

Webサービスからレコードが返されたときに、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>

あなたが提供できるあらゆる助けをありがとう。

javascriptjquerypluginsjqgrid
23
Billyhole

jqGridは、特別なソースと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');
        }
    }

お役に立てれば。

36
seth

seth's ソリューションを少しひねります：

  1. var recs = $（ '＃list'）。jqGrid（ 'getGridParam'、 'records'）;の代わりに使用できます。

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

    jqGridグリッドオプション 'records'デフォルト値= 'None'

    jqGridグリッドオプション 'reccount'のデフォルトは0で、レコードがない場合でも常に数値を返します（0を返します）

    参照 wiki：options @ jqGrid Wiki

  2. ラッピングdivを使用したくない場合は、$('.ui-jqgrid').hide()または$('.ui-jqgrid').show()を使用してjqGrid全体を非表示にすることができます。

    Ui-jqgridクラスは、jqGridの親にのみ使用されます。

6
woodchucky

私はこれを見つけています：

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

「NaN」を返しています。グリッドにレコードがない場合、「records」プロパティはnullに設定されます。したがって、それを数値にキャストして、それがゼロに等しいかどうかを確認することはできません。

5
Max
<!-- 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();
    }
}
1
Trilok Giri

このメソッドを使用してjqGridを非表示にしてみてください。

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

必ず含めてください：
jquery.jqGrid-x.x.x/src/grid.custom.jsファイル。

上記の方法について詳しく説明しているこの post を参照してください。または jqGrid wiki このメソッドについてAdd on Grid Methodsセクションで説明しています。

考慮すべきもう1つの点：
ラッパー（ post を参照）を使用しないようにします。jqGridで<div>タグを使用して非表示にします。グリッド列を手動で幅を広げて超えようとすると、overflow: auto;属性が機能しないためですラッパーdivの幅。
言い換えると、jqGridには、外部divを使用せずに水平スクロールバーを作成するロジックがすでに備わっています。

注：IE8および9でテスト済み

1
Roman M

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"; 
}
0
Ankit Adlakha

Jqgrid要素にopacity：0を設定するだけです。それも動作します。

0
murtaza sanjeliwala

皆さん、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');
    }
  }
0
Robert Smith
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();

                                }
                            }

                        });
0
MS Wani

グリッドの定義に「キャプション」オプションを含めないことで十分です。バージョン5.0.1でテスト済み

0
user7082304