web-dev-qa-db-ja.com

jqGridトリガー「読み込み中...」オーバーレイ

グリッドの読み込み中に表示されるストックjqGrid「読み込み中...」オーバーレイをトリガーする方法を知っている人はいますか？ jqueryプラグインをそれほど手間をかけずに使用できることは知っていますが、アプリケーションのルックアンドフィールをjqGridですでに使用されているものと一貫性を保つことができるようにしたいと思います。

私が見つけた最後のものはこれです：

jqGridは、テーブルの更新時/カスタム更新時にデフォルトの「読み込み中」メッセージを表示します

  • n8
jqgridoverlayloading
13
gurun8

DisplayLoadingMessage()関数のようなものを探している場合。 jqGridには存在しません。 jqGridのloaduiオプションはenable（デフォルト）、disable、またはblockにのみ設定できます。私は個人的にblockを好みます。 （ http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options を参照）。しかし、それはあなたが望んでいたものではないと思います。

JqGridからの「Loading ...」メッセージが好きな場合にできる唯一のことは、同じメッセージを作成することです。ここでは、このメッセージを表示するためにjqGridが行うことを説明します。2つの非表示のdivが作成されます。 id = listのグリッドがある場合、このdivは次のようになります。

_<div style="display: none" id="lui_list"
     class="ui-widget-overlay jqgrid-overlay"></div>
<div style="display: none" id="load_list"
     class="loading ui-state-default ui-state-active">Loading...</div>
_

ここで、「Loading ...」または「Lädt...」（ドイツ語）というテキストは_$.jgrid.defaults.loadtext_から来ています。 divのIDは、「lui_」または「load_」プレフィックスとグリッドID（「リスト」）から構築されます。 ajaxリクエストを送信する前に、jqGridはこのdivの1つまたは2つを表示します。 loaduiオプションがenableの場合、2番目のdiv（id = "load_list"）に対してjQuery.show()関数を呼び出します。ただし、loaduiオプションがblockの場合、.show()に関して両方のdiv（id = "lui_list"とid = "load_list"）が表示されます。関数。 ajaxリクエストの終了後.hide() jQuery関数が1つまたは2つのdivに対して呼び出されます。それがすべてです。

すべてのcssクラスの定義は_ui.jqgrid.css_または_jquery-ui-1.8.custom.css_にあります。

これで、jqGridの「Loading ...」メッセージを再現するのに十分な情報が得られましたが、もし私があなただったら、本当にこれを実行したいかどうか、または jQuery blockUIプラグイン の方が良いかどうかをもう一度考えます。あなたの目標。

17
Oleg

私が使う

        $('.loading').show();
        $('.loading').hide();

新しいdivを作成しなくても正常に動作します

7
dr0zd

簡単に、それを示すために：

$("#myGrid").closest(".ui-jqgrid").find('.loading').show();

それからそれを再び隠すために

$("#myGrid").closest(".ui-jqgrid").find('.loading').hide();
3
Justin Levene

onSelectRow JQグリッドのイベントの行の下に配置しました。

$（ '。loading'）。show（）;

2
R Kumar

オーバーライドするスタイルは[.ui-jqgrid.loading]です。

1
Joel E

$（ "＃load _"）。show（）および.hide（）を呼び出すことができます。ここで、はグリッドのIDです。

0
Chris Kemp

@Olegが述べたように、 jQuery Block UI は、ajaxベースアプリケーションの開発中に多くの優れた機能を備えています。これを使用すると、UI全体または element Block と呼ばれる特定の要素をブロックできます。

JqGridの場合、グリッドをdiv（sampleGrid）に配置してから、次のようにグリッドをブロックできます。

$.extend($.jgrid.defaults, {
    ajaxGridOptions : {
        beforeSend: function(xhr) {
            $("#sampleGrid").block();
        },
        complete: function(xhr) {
            $("#sampleGrid").unblock();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $("#sampleGrid").unblock();
        }
    }
});
0
Alireza Fattahi

$（ 'div.loading'）。show（）;で動作しています。これは他のコンポーネントでも役立ちます

$('#editDiv').dialog({
            modal : true,
            width : 'auto',
            height : 'auto',
            buttons : {
                Ok : function() {
                    //Call Action to read wo and 
                     **$('div.loading').show();**

                    var status = call(...)
                    if(status){
                        $.ajax({
                            type : "POST",
                            url : "./test",
                            data : {
                                ...
                            },
                            async : false,
                            success : function(data) {

                                retVal = true;
                            },
                            error : function(xhr, status) {


                                retVal = false;
                            }
                        });
                    }
                    if (retVal == true) {
                        retVal = true;
                        $(this).dialog('close');
                    }
                    **$('div.loading').hide();**
                },
                Cancel : function() {
                    retVal = false;
                    $(this).dialog('close');
                }

            }
        });
0
Anand

ブロックせず、組み込みのajax呼び出しを使用してデータを取得したくない場合

datatype = "local"

次のようにjqgrid関数を拡張できます。

$.jgrid.extend({
    // Loading function
    loading: function (show) {
        if (show === undefined) {
            show = true;
        }
        // All elements of the jQuery object
        this.each(function () {
            if (!this.grid) return;
            // Find the main parent container at level 4
            // and display the loading element
            $(this).parents().eq(3).find(".loading").toggle(show);
        });
        return show;
    }
});

その後、簡単な呼び出し

$("#myGrid").loading();

または

$("#myGrid").loading(true);

すべてのグリッドの負荷を表示するには（もちろん、グリッドごとにグリッドIDを変更します）または

$("#myGrid").loading(false);

同じページに複数のグリッドがある場合に特定のグリッドをターゲットにして、読み込み要素を非表示にします

0
dpineda